12个PC网页的UI设计趋势(上)汇编.doc

12个PC网页的UI设计趋势（上）(翻译)? 系统分类：?设计文章?-?设计资讯/资料?-?行业观察 文章版权：SISENdesign?翻译，如需商业用途或转载请与?SISENdesign?联系，谢谢配合！?原文链接 SISENdesign? 大连 / 设计爱好者1天前发布 ? ?因为智能手机的普及，用PC浏览的网站关注度正在下降。但是，托B2B数字营销的福。PC网站今后也变成战略中心。即使在B2C的领域，PC网站也是不可或缺。 ? ?对于在硬件方面没有太大变化PC的网页设计来说，也有技术被固定化的印象，实际上现在也正在接受时代的潮流而发生着变化。特别是下面那样的环境变化，也给与PC网站的UI设计带来很大的影响。 ?显示设备的多用化。 ?智能手机应用的普及化 ?电子设备触摸屏的普及 ? ?如果迎合趋势将会取得成功不是吗？这个基础就是抓住用户动向的变化，有必要完全理解这一变化。因此这篇文章是PC网页 UI设计的最新动向，基于那些背景下的推测汇总。 1.Big UI / low Density / Long Page的潮流 ? ?举例说曾经的PC网站有很多是在有限的空间内填入了大量元素的设计。但是现在UI部件变得有：大型化（Big UI）、较低的密度（Low Density）、长页面（Long Page）的倾向。 ? ?以前是海外以创意型，初创型为中心网站所采用的设计，进入日本的海外企业和前卫的网页设计师，采用那些理念设计的企业网站，渐渐地在日本也被广泛应用，这个趋势也与扁平化设计相呼应。2013年以后以Big UI / Low Density / Long Page 为基础的设计理念在网站更新中使用增多了。 ? ?这样的趋势，不能单单看起来时兴，其有合理的存在理由。在开发的立场，让响应式网站更容易实现。如果在用户的立场来看，更容易浏览、更容易理解、不再迷茫，除了所说的这些以外，让网站更好的利用触摸屏，作为其更大的优点。 ? ?近些年不只手写板，笔记本电脑也安装了触屏。对于在没有准备手机网站的情况，在智能手机上，网站的页面也被要求需要有一定程度的浏览。 ? ?触摸屏，因为用手指的点击，不能进行精准操作。因此用户界面会变大。元素之间的必需留出充分的空间。如果用户界面变大，密度变低，当然页面中表现元素要少，页面变长，以滚动为前提了。 ? ?这篇文章之后要介绍很多趋势，都是从Big UI / Low Density / Long Page的潮流中派生出来的。这不是最时尚的流行，但是现在是最适合用户行为的设计思想。 2.1栏布局 ? ?作为Big UI / Low Density / Long Page合适的布局，就是1栏布局。 ? ?曾经左右两栏布局的PC网站是UI设计主流。在电子商务网站等有大量信息的网站中，3栏布局也很常见。但是现在去掉左右栏，只焦点于内容部分，1栏布局正在增加。 ? ?对于用户，不再有不必要的杂音映入眼帘，集中真正必要的内容。文字更容易阅读，图片被展示的更大。 ? ?另一方面，映入眼帘的信息量减少，广告等会变得有些分散。因此，对于用户活动线路的设计，必须要更加谨慎。 ? ?另外，在侧边栏设置局部的导航条手法，与其他层级的网站相关，有让用户不再迷茫的突出优点。去掉侧边栏的导航条，让网站的层级降低，尽可能减少菜单，不止限于1页内的布局意味着网站全体的设计方法需要重新考虑。 ? ?反过来说，多层级化的前提是与网站的庞大度有关。有很多的1栏布局不能让内容被准确的理解，据此判断需要谨慎使用。 3.中对齐 ? ?1栏布局的一个问题是文字换行吧。文字充满整个宽度时候会显的很长，很难保持布局的美观。如果1行的文字数量超过40个字，人们就会觉得难以阅读。不能因为是1栏就什么也都不考虑，宽度被文字占满，是不可避免的。 ? ?解决这个问题的一个思路就是中间对齐。说到宽度很宽1栏的布局，中对齐和左对齐如何很好的组合，变成设计的要点。 ? ?中对齐的正确使用有一些值得注意的点。首先，必须避免用户的视线忽视中间。例如，如果长文本中对齐，文章的开始点就会因此改变，变得难以阅读。如果使用中对齐，短文章不必要换行，长文章必须左对齐。 ? ?还有，接近元素宽度充满的时候，虽然用中对齐，也不能很好的解决。但是,宽度被占满的情况是不存在的，看到中对齐不完整的位置就像悬浮一样。为此，必须要在运用盒子和边缘等下功夫，中对齐才不会出现违和感。 4.固定的顶部和顶部的超薄化 ? ?固定的顶部也很普遍。在很多的时候，这里搭载的是导航条。无论能进入页面内哪个位置，都能立即回到主要部分。固定顶部的UI没有侧边导航，当页面较长时，能确保使用的敏捷度。 ? ?但是，固定的顶部没必要的时候，会有占据一些空间的缺点。因此，顶