
1.3 如何制作出优秀的UI
精湛的技巧和理解用户与程序的关系是设计出一个有魅力的UI的前提。一个有效的用户界面应该时刻关注着用户目标的实现,这就要求包括视觉元素与功能操作在内的所有东西都必须要完整一致。
1.你的UI是不是保持着高度一致?
当用户来到你的站点,他的脑子里会保持着自己的思维习惯,为了避免把用户的思维方式打乱,你的UI就需要和用户保持一致。你不仅可以将按钮放到不同页面相似的位置,使用相契合的配色,还可以使用一致的语法和书写习惯,让你的页面拥有一致的结构。例如你的某个品目下的产品可以拖放到购物车,那么你站点中所有产品都应该可以这样操作。






微淘界面设计风格高度一致
2.用户可以自由掌控自己的操作吗?
当在设计UI之前,你应当考虑到自己的站点是否容易导航。一个优秀的UI,用户不仅能自由掌控自己的浏览行为,还要确保他们能从某个地点跳出或毫无障碍地退出。而这些在用户离开前弹出窗口的行为,正是用来判断UI易用性的标准。

友好的用户界面
3.你对你的用户群了解吗?
只有对你的用户群有所了解,才能设计出有效的UI。因为不同的用户阶层对不同的设计元素有着不同的理解,比如16~20岁年龄段的人和35~55岁年龄段的人的喜好和习惯肯定有很大的不同,所以你的UI设计必须要有针对性。



适合儿童的界面设计(简单、活泼)



适合年轻人的界面设计(亮丽)


适合老年人的界面设计(规整)
4.你有预防错误的措施吗?
我们应该尽可能检查程序中的错误和Bug,而Beta测试是消减错误的最好方法。为了更好的用户体验,最好减少那些弹出一个窗口告诉用户发生了什么的东西。
5.你有没有在重要的位置为用户展示最重要的内容?
为了用户更好地理解你的内容,你应该将重点放在重要的内容上面,在重要的位置为用户展示最重要的内容。
6.你的设计是不是显得很简约?
你的UI功能可以很强大,但是设计一定要简约,因为拥挤的界面,不管功能是多么的强大,都会吓跑用户,而简约的设计不仅能增强UI的易用性,还可以让用户不必关心那些无关的信息。所以很多优秀的站点的设计都显得十分简约。






一些简约设计的界面
7.你有没有使用视觉提示?
当你使用了像Ajax和Flash一类的技术,在加载内容的时候,你应当提供视觉提示,要让用户知道目前他在做什么。
8.你的UI有操作提示吗?
你的用户是靠自己的研究还是看FAQ文档学习来操作UI。一个优秀的UI,应当在UI现场提供类似于在jQuery的各个UI元素上显示简单的操作提示。
9.你的内容清晰吗?
文本的清晰和准确是确保内容的两个重要因素。
10.你是怎样使用色彩的?
UI的重要元素是色彩,不同的颜色代表着不同的心情。在使用色彩的时候,一定要和站点及主题相吻合;其次还应当考虑到色盲用户的感受,如果你选定了某种配色,就应该在整个站点及主题统一使用这种配色,以保持色彩的统一性。

清爽的色彩搭配

厚重的色彩搭配

张扬时尚的色彩搭配
11.你的UI是不是太过花哨?
最好的设计是用来体验的,而不是用来看的。所以你的UI不要放一些花哨的东西给用户看,而是应该让用户去体验。因为越是简单的UI设计,用户体验越好。
12.你的UI结构是否清晰明了?
在你的UI中,总体结构应当清晰明了,各个元素应当放在它们适当的位置,彼此之间相互关联,那些不相关的东西,我们可以把它们单独放置。