韩国网站细节化体验

标签： #<Category:0x00000016bf2e38> | 发表时间：2012-09-04 20:10 | 作者：君沫
出处：http://ued.alimama.com/
T18_yfxkdnxxb1upjx

NAVER（네이버）是NHN公司下韩国著名门户/搜索引擎网站，其Logo为一顶草帽，于1999年6月正式投入使用。

http://shopping.naver.com/  在前不久对页面整体进行了改版，改版后的页面较之以前的更加整洁，增加了层次感，张驰有度，将页面整体的品质感也做大的提升，从本期开始，我们将对韩国网站的一些细节进行部分研究和学习，也做为和大家的一个讨论，希望能够一起从网站本身的视觉细节上多做研究，在设计时，能让页面更有节奏感

 

阅读全文

 

......................................................................................................................................................

第一期 栅格

我们先来看一下shopping.naver的首页

 

 

从上面可以看出来，naver是按照一个固定的栅格来进行扩展的，那么他的区块为多大呢？

 

......................................................................................................................................................

 

对各个区块进行测量：

 

 

从上面测量出来的区块大小来看，他都是按照一个210x290为标准的栅格块来对各个版块进行区分

 

分为块状结构后，不仅使整个页面的区块更加明显，内容更有条理和清晰外，同时还平衡了每块内容区的比重，无论在哪一屏，都拥有了强烈的一致性，同时，还有一个非常明显的好处 ，那就是～～

 

......................................................................................................................................................

 

我们来看一下小的分辨率下页面的布局吧

 

 

是不是，感觉非常灵活和自然，无论是在哪种屏幕分辨率下，他都进行了自然的重组和排序，而且对于内容上也没有丝毫的影响，不必考虑太多对于响应式实现的过多准备，表现非常棒！！

 

......................................................................................................................................................

 

看完了shopping.naver的栅格，想必大家现在第一反应就是想到了我们一淘的网站，目前一淘网站特别是首页，的确是没有应于任何栅格，只做了一些基准的对齐和小范围的栅格。通过对shopping.naver的栅格分析，我对一淘的网站栅格也做了shopping.naver同样的标准化栅格实验。

按照目前宽度为990的话，通过计算，会发现，190也同样是一个神奇的数字，在990下，我们以naver宽度比例来假定一淘网站的栅格比例

 

......................................................................................................................................................

 

以190x270为一个基本栅格单元格

我们先按照shopping.naver的版式，以990的宽度对etao.com进行栅格划分

 

 

可以看到，我们的网站也可以像naver一样进行完美栅格划分
 
......................................................................................................................................................
 
 
那么～～～
是不是同样的说，我们也可以像naver一样对版块进行流畅移动，处理不同屏幕分辨率下网站的显示结构
 
 
ok，本篇只是对栅格进行了一个从naver结构中的平移，源文件存放于etaoux\etaoued \j_君沫\个人分享\韩国网站细节化体验\栅格篇，如果有任何想法，大家可以一起讨论
 
下一篇，字体细节化，随后发出～～～

相关 [韩国 网站 体验] 推荐：

韩国网站细节化体验

- - UX 一淘体验中心
NAVER（네이버）是NHN公司下韩国著名门户/搜索引擎网站，其Logo为一顶草帽，于1999年6月正式投入使用. http://shopping.naver.com/  在前不久对页面整体进行了改版，改版后的页面较之以前的更加整洁，增加了层次感，张驰有度，将页面整体的品质感也做大的提升，从本期开始，我们将对韩国网站的一些细节进行部分研究和学习，也做为和大家的一个讨论，希望能够一起从网站本身的视觉细节上多做研究，在设计时，能让页面更有节奏感.

浅析韩国团购网站

- est - 最新文章 - UCD大社区
前段时间看过SocialBeta里的一篇文章，叫“由韩国团购网站引发的一些讨论”，让我忽然想起5月初我写过的关于韩国团购网站的文章，现在与各位童鞋分享，若有不足之处请多多包涵. 团购，相信这个词大家并不陌生. 国内去年开始的团购热，对广大网民来说又带来了一波新鲜的冲击. 延续去年的火爆发展势头，截止到目前，国内团购网站数量已超过了5000多家.

社交网站setNight: 提供不一样的夜生活体验

- Caiwangqin - 36氪
不知你有没有这样一种感觉，每当夜幕降临，总会感到自己的夜生活枯燥乏味，而Facebook和Twitter这样的社交网站又不能为你提供丰富独特的夜间消遣活动. 不用担心，一个新的社交网站setNight诞生了，它定能为你带来不一样的夜间生活体验. SetNight的创意来源于公司CEORick Kats与合伙人的一次深夜谈话.

体验HTML5！16个精美的单页网站作品欣赏‎

- Amo - HTML5研究小组
HTML5 是现在Web开发领域的热点，更多的开发人员开始使用HTML5来开发交互性强、效果出众的Web应用和游戏. 今天，本文收集了16个精美的 HTML5 单页网站作品，让大家感受一下 HTML5 的魅力，一起欣赏.

20个改变网站用户体验的方法

- Elisa - 所有文章 - UCD大社区
在注册表单中可以给用户更多的选项：比如可以使用“电子邮件，用户名，ID”等多种格式的用户名进行注册. 此外注册过程要尽量方便，比较好的例子如下面的图片，注册时只需要输入一个密码即可，在第一登陆后才会需要你输入一个用户名. 更多“登录”选项 同样相对登录页面来说，有多个登录名选项将会提高网站的友好度，比如可以同时允许用户名或电子邮件两种方式登录.

10个网站用户体验优化的研究结果

- 秋五 - 互联网的那点事
我们不断地从各种地方，听到各种关于用户体验优化的技巧或提示，其中许多乍一听都很富有逻辑，但是假如我们能找到真实的数据和报告去验证这些理论或猜想，显然就能更好地确认预期效果. 本文讨论一些用户可用性方面的研究发现，这些研究结果的获取，主要通过视觉轨迹、数据统计报告、以及关于网站可用性改进方面的调研. 你将会发现，许多可用性优化的提示是众所周知的，但是得到了更好的数据支持；与此同时，你也能得到一些惊喜，这些发现可能会改变你对目前网页设计方式发展走向的看法.

【CDC翻客】从2012年看网站体验的五大趋势

- - 腾讯CDC
　　译者注：抛砖引玉一篇趋势浅文. 此文提炼的比较精辟，让人看完不由觉得“确实如此”. 相比其他很多几十条泛泛而谈、泛泛而用的趋势文章来说，算是精品哦. 另外，文中有很多优秀网站案例，也值得我们学习. 　　原文地址： The Top 5 Website UX Trends of 2012. 　　2012年,用户界面技术持续不断发展，常常有效地模糊了设计、可用性以及技术之间的界限，从而为用户带来了可用性高、愉悦性强的综合体验.

2012年电子商务网站用户体验研究

- - 业界
本文是对Smashing Magazine上《 The State Of E-Commerce Checkout Design 2012》一文的编译，本文从付费流程角度，分析了2012年电子商务的用户体验现状. 2011年，Smashing Magazine发布了一篇文章《 Fundamental Guidelines Of E-Commerce Checkout Design》，分享了11条基本的电子商务网站付费流程设计指南.

提升网站用户体验的7个妙招

- - 人人都是产品经理
古者称师为先生，十年树木，百年树人，行业要进步，先生多多益善. 自觉学识尚浅，还远未达到先生的高度，但希望尽自己微薄之力，力所能及的做一些解惑工作. 最近在微博里回复了几个朋友的咨询，挑选其中一个有代表性的问题，在博客里做个展开说明分享. 问题：网站用户体验包括哪些内容，如何有效提升. 回答：网站用户体验，是个很宽泛的概念，为便于理解和记忆，简单归纳可分为7个内容：网站性能、视觉设计、导航分类、站内搜索、网站内容、交互设计、登录(付款)方式.