一、ui 工具的扩展响应式网页设计（responsive web design）近来人气急遽攀升，这也意味着越来越多网站看起来很相像。不过，也不仅止于是响应式网页设计，于竞争市场上wordpress 也有只看不见的手在操作着。
然而，有相似的外观不尽然不好。我们改变了使用网路的方式，许许多多的ui设计也因此孕育而出。设计模式发展俨然已成熟，甚至到了快看不见创新的ui 工具了。再换句话说，一个结帐功能的可能性仅仅如此，没有理由还要再多此一举改变它；同样的，登入模组也是。ui 工具必须透过流畅地体验来引领使用者操作。
photo credit:cypress north
这里提到的一些工具，你应该要熟悉：
1. 汉堡式选单（the hamburger menu）：虽然有部分设计者不推荐，但依然不能否认它被广泛使用，是使用者熟悉的功能之一。
photo credit:?silenzaviaawwwards
2. 注册帐号（account registration）：你能发现，当要在一个网站进行注册时，会有几种模式：它可能是填写一个表单或一颗按钮，就成功注册帐号了。多步骤式向导表单也许是有效的，因为有着「一大块」必填栏位；降低摩擦并促成使用者有效地跑完流程。
photo credittypeform
3. 长页卷动（long scroll）：能够把你所有重要元素通通都涵盖在一起，目前已无人不晓了；再说，因为手机的操作，几乎每个人都习惯了长页卷动。这项技术对于希望透过故事叙说来吸引使用者的网站尤为适合。不过，你还是可以不使用卷轴，制作多页式的网站格局。
photo credit:vimeo
4. 多层版面配置（card layouts）：始于pinterest，多层版面的应用随处可见。由于多层版面配置完美地让所有资讯，在一口大的范围之内全部一目了然；每个多层版面都是一个统整的概念。因为它们就像是「内容元件（content containers）」，矩形的形状更让它很好放置在不同载具的中断点。
photo credit:thenextweb
5. 形象影像（hero images）：视觉是最给人强烈印象的感觉，hd 高画质影像是抓住使用者目光最快速的方式之一。由于网路频宽与数据压缩的进步，使用者越加不能接受载入的时间过度缓慢。一个常见的布局，常常会是一个形象影像在卷轴顶端，接着是不规则片段或是以矩形为基础做排列。
photo credit:maaemo
二、丰富的动画特效越来越多人利用动画特效来增添网站的故事性，让体验充满了互动和娱乐性。但你不能仅止于四处放动画特效，要深思熟虑是否加了它可以为网站故事和整体加分。
动画特效可以分为两类：
1. 大规模动画特效：主要被使用为互动性工具，对使用者有较大的影响力，包括视差滚动（parallax scrolling）和弹窗式通知（pop-up notifications）等功能。
2. 小范围动画特效：这些包含了微调器（spinners）、悬停效果（hover tools）和载入条（loading bars），且使用者也无须输入资料。
接着，我们将介绍最常见的７种动画特效：
(1) 载入特效（loading animations）提高娱乐性与使用者体验取代了原本是乏而无味的过程。热门的载入特效通常是扁平化设计（flat design）、极简风格、组合性或一页式网站。
让它们简单化，最好不要加音效；这样更让你的网站作为调色盘般，具有个人风格。
slackvialauren tan
(2) 非滚动式导航与选单（navigation and menus (nonscrolling)）隐藏导航选单是越来越受到欢迎，特别是因为能减少萤幕的占用空间。
(3) 悬停动画（hover animations）悬停特效给了一个使用者用滑鼠操作网站的直观感受，使用者浏览有所保留的内容时，自动的悬停动画可以即时提供视觉反馈。
photo credit:humaan
(4) 相簿与幻灯片（galleries and slideshows）相簿与幻灯片有效提供了使用者展示多张图片，且不会过度负担。
photo credit:born fighterviaawwwards
(5) 影格动画（motion animation）我们的眼睛自然眨动一般地呈现方式，影格动画有效地提高视觉层次。此模式的设计有助于受到使用者的注意，且增添趣味性。
photo credit:bugabooviaawwwards
(6) 卷动（scrolling）平滑卷动利用动画并提供了更进一步的操作权给使用者，动画特效的快慢可自行拿捏。
photo credit:squarespace
(7) 背景动画、影片（background animations/ videos）一个简单的动画背景若适量使用，可以增加网站识别度；一旦过量也可能导致使用者不再光顾。关键在应用于小环节，或者图片上轻柔缓和的动画效果。
photo credit:dunckelfeld
三、微互动（microinteractions）微互动大家其实并不陌生，它经常出现在我们周遭。开始新的一天，透过微互动从手机关闭闹铃那一刻的使用者介面；每个人可能都是如此。我们也使用越来越多因此衍生而出的app 与载具装置。
微互动大多是执行，或者协助你执行，这有些不同：
photo credit:slack
1. 讯息的状态或一点反馈
2. 看得见操作结果
3. 协助使用者操作
微互动在app 扮演着重要角色，使冰冷文字注入灵魂，不再机械僵化；互动型式让载具装置更加人性化地引导使用者，在关键的时刻亦更加提高实用性能。
四、实感设计：更丰富的扁平化设计选择（material design）去年， google 推出新的设计理念：实感设计（material design）；利用阴影、移动、深浅等效果，为使用者创造出更贴近真实的设计。google 在七月发布的精简版实感设计（material design lite）更适合于网站。
photo credit:google now
实感设计的目的是为了创造整洁，更专注于使用者经验（ux）的现代主义设计。这也带来不少人抨击google 的设计美学，因为它改变了游戏规则。实感设计简单的外观，与现在发展趋势有着一大共通点，那就是扁平化设计。然而，实感设计在扁平化设计上有了更多变化，加入了深浅、阴影效果。
photo credit:angular
五、响应式设计（responsive design）拜近年行动网路使用率的提高所赐，现来rwd（响应式网页设计）大受欢迎。可以肯定的说，响应式设计还不会退流行，因为rwd为商家提供了一个功能齐全、载具变换友善，却相对方法简单且价格低廉。为了在rwd使用高峰期更有效地发挥，根据guy's pod给予设计师的建议是：
1. 在javascript 与css 图片读取为无标签时，仍会下载图片，应避免使其徒增不必要的容量。
2. 以百分比来定义响应式图片。
3. 以javascript 控制载入或桌面版用的javascript 组件，应该避免用于较小的载具装置；特别要注意第三方脚本。因为容易降低性能或用于共享资源发生问题。
4.使用ress：responsive and server side。
5. 请使用者有效的测试每个页面，并借此优化网站。
photo credit:uxpin
毫无疑问，rwd是非常实用且多功能性的。其呈现的重点不仅在于ux，google更在今年四月份发表行动装置的友善更新（mobile friendly update），就是因为rwd能与极简风格高度相容，且减少网站的体积负担；它们可以自动适应任何中断点与萤幕尺寸。
六、扁平化还不会退流行扁平化设计已行之有年，它与极简主义、rwd、实感设计等设计趋势兼容。在未来，我们很可能会看到以下扁平化设计成为主流。
1.长版阴影（long shadow）：发展出更深度的扁平化设计。
2.活泼的色彩配置（vibrant color schemes）：热门的ui框架及样版，让更多人开始采纳更鲜明的色彩应用于设计。
3.排版简约化（simply typography）：在扁平化设计上，以简单直白的方式传达信息，帮助文章更清晰了然。
4.虚拟按钮（ghost buttons）：在ux的表现上，使用者能不被干扰，大部分使用于外框、滑鼠滑过会有变化的按钮。
5.极简主义（minimalism）：打造简洁、清新的介面，降低ui元件的使用量。
photo credit:the guardian
网页设计趋势上的额外建议别盲目追随潮流，因为可能只是一时的「时尚」。趋势代表流行的技术，虽然诱人，但要确保它是适合你的。举例来说，一个电子商务网站可绝对不想看到一页式无限卷动的网页设计。
趋势对设计师而言，仅仅是多了一项工具；怎么用得好，才是你的工作。
photo credit:beoplayviaawwwards
本文翻译来源jerry cao @ aw