韩国网站细节化体验第一期:栅格化布局


  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结构中的平移,源文件存放于etaouxetaoued j_君沫个人分享韩国网站细节化体验栅格篇,如果有任何想法,大家可以一起讨论

  下一篇,字体细节化,随后发出……

  文章来源:一淘体验中心

时间: 2024-09-22 02:17:59

韩国网站细节化体验第一期:栅格化布局的相关文章

网站分析:韩国网站细节化体验

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 NAVER(네이버)是NHN公司下韩国著名门户/搜索引擎网站,其Logo为一顶草帽,于1999年6月正式投入使用. http://shopping.naver.com/ 在前不久对页面整体进行了改版,改版后的页面较之以前的更加整洁,增加了层次感,张驰有度,将页面整体的品质感也做大的提升,从本期开始,我们将对韩国网站的一些细节进行部分研究和学习

浅谈地方网站细节化运营思路之栏目建设

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 地方网站的竞争越来越激烈,但并不表明,草根站长在地方网站的运营方面就没有机会了?只不过要想成功运营地方网站,更多的是需要智慧,通过创新的运营的思路,才有可能在激烈的竞争中脱颖而出!相信很多人也懂得这个道理,但是却不知道从何处来着手创新,总会想的范围很广,似乎要一下子就能够找到成功运营地方网站的钥匙!可是一旦这么去想,那么想的时间往往比做的时间

忆购买“seo艺术”对比两个书籍网站的用户体验细节

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 前几天笔者想买一本书,自然而然就想到了京东和当当,于是就试着在对应的网站上找这本图书的信息,于是与,用户体验的差异就出来了,那么笔者就写一下关于两个网站在用户体验的差异之处吧,顺便也说一下自己的观点. 1)书名的搜索框 - 类别的差异化 无图不真相,其实刚刚看到了这样一种现象,也算是关注一下吧,我们在搜索框中搜索"seo艺术&quo

细节剖析小说类网站的用户体验

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 大家好,我是石头.记不清从什么时候开始用手机看小说成为一种时尚,80后.90后的一些手机党们利用一点零碎的时间看起了小说,什么修真类的.什么玄幻类的等各种小说.随着小说迷们的增加也孕育了更多的小说类网站,最牛的当属起点中文网了,不过需要注册会员得花钱才能看完一部小说的全部章节,这让许多屌丝读者望而却步.做SEO就是做用户体验,而用户体验包含的

网站细节优化全面提升用户体验

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 网站关键词有排名,流量也不错,就是转化率低,这是为什么呢?网站优化不仅仅是排名,流量,我们的最终目的是转化率,网站优化更要考虑网站细节方面的优化,全面提升用户体验.网站优化从细节开始,注重内容,注重用户体验.今天为大家分享一些网站优化细节方面的内容,希望对大家有用. 一.网站的视觉效果 当用户来到我们的网站,要让用户感觉到我们的网站页面设计美

教你如何做好网站的客户体验

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 网站优化是什么?指的是我们在做网站的时候,把网站页面和结构上优化得更符合搜索引擎,更符合用户体验(User Experience,简称UX 或 UE).网站的核心不仅仅是seo,我们的最终目的仍然是用户体验,那么我们如何去把一个网站的用户体验做好呢?我总结了以下五点: 一. 服务器的速度.我们都知道,一个网站的访问速度,决定着用户第一次打开你

网站移动化方法:siteapp让网站移动化

文章简介:网站如何移动化 李彦宏已经为您想好了. 移动互联网是趋势,这个观点到今天这时候,相信大家都毋庸置疑.因为安卓系统的普及,买个智能手机的成本越来越低,便宜的甚至花个200-300元左右就可以买个安卓手机.或者办个电信或移动的宽带服务直接送你一台性能不错的安卓手机. 手机上网已成主流趋势 感觉再过段时间,市场上可能就没普通的手机卖了,安卓系统的智能手机就是最低的配置.随着安卓这样的智能手机的普及,也就是人手一台小型平板电脑,习惯用手机上网的人会越来越多. 可能大家还会发现,自己QQ上的好友

韩国网站的设计好在哪里

设计 从80年代到现在,可以说是在我国掀起一股韩流,如韩国的音乐.电视剧.电影.游戏等,可以说现在看爱情剧的都喜欢看韩剧,韩国的电影.游戏在我国也是比较流行.而韩国的网站在我国也是同样受到大多数网站爱好者的欢迎. 一些网页设计的初学者一般都会去模仿韩国的网站进行设计,通过分析他们的网站,让人不由得惊叹,韩国的站点在框架结构.内容排版.色彩搭配.图片运用上达到了非常和谐的统一,他们的设计师更是拥有较大的设计空间,让人不由的惊叹他们的创造力,当然并不是说我们国人的创造力没他们强. 首先是韩国的设计师

改善网站的用户体验网页中应用手绘风格

文章描述:本文中,我们将讨论怎样在网页中应用手绘风格,以改善网站的用户体验. 本文中,我们将讨论怎样在网页中应用手绘风格,以改善网站的用户体验. 识别度与真实感 手绘风格非常有利于展示人性色彩,形成独特的识别度,为用户带来真实感.当你收到好友寄来的明信片时,你总是希望看到卡片是手写的,带着好友独特的笔迹,而不是用电脑打印出来的.一张手写的便笺也总是比电脑打出来的纸片更加随意和亲近. 在网页设计中,道理也是一样的:手绘和手写风格的应用可以让产品显得更加独特.更加真实.更加值得信赖.下面是手绘风格带