Web设计快速入门

在基本顺利完成功能的基础上，就需要考虑美观的问题了，在眼球经济的当下，一个面向用户的产品，如果没有好的UI，那么它就是不合格的。这部分内容算是初出茅庐，会持续更新。

"一个人的外貌决定我是否想了解他的内心，一个人的内心决定我是否一票否决他的外貌。"—知乎

 

• 指引用户

令人心动的第一印象：比如对于苹果产品，大家基本上都是"一见钟情"，再比如WordPress博客（可以作为教科书，https://wordpress.org/），着实是大方美观。接下来提及几个细节，引导用户视线的古腾堡图表(一般我们看东西，视线都趋向于从左上角到右下角，http://www.minichina.com.cn/minihatch_pc.html)；通过颜色的变化来吸引注意。

凸显个性：统一设计的风格，形成积极的印象；通过符号隐喻主题。

导航之道：使用动词而不是名词来作为导航语，提升用户的代入感，比如用Sign in代替Login；可以借助环境提示作为引导的线索。

• 经典思路

开门见山：简化话术，例如使用"赶快行动"词组，比如find a course。

大方的表单布局：比如表单中文本右对齐，而input左对齐，视觉上会更容易聚焦；优化确认、取消按钮，比如使用Register now，而cancel可以通过暗化处理，暗示用户不要选择；简化长表单，例如调查问卷；参考优秀的用户登录注册模块（https://github.com/join）;把数据变成仪表盘展示；在正确的时间显示正确的工具，通常情况下把高级的玩意隐藏起来。

生动传神的视频：视频显示胜过千言万语，比如Ted的视频，分时段有章节非常棒(https://www.ted.com/)。

优雅简介的搜索：基础查询界面极简(https://www.google.com.hk/)，复杂查询可以通过渐进性增强，比如一条条增加查询项；通过poka-yoka机制自动完成输入框，不过方便还可以减少用于输入错误的可能性；借助成熟的解决方案，比如baidu的分页(https://www.baidu.com/)。

驾驭Wizard向导：通过向导建立清晰的预期，方便用户的使用，比如网上报名考试(http://www.ruankao.org.cn/)。

即时反馈与校验：通过?,what is this等连接来解释操作；有纠错也要表扬；实时更新信息；在输入时能给予反馈更棒，比如显示已经输入的字符串数量。

• 拾遗

开展社交活动：重视用户的分享与交互，比如评论，分享到微信等；建立评分系统，比如大众点评。

唤醒尘封用户：通过邮件通知用户，但要有度，比如微信推送；支持优雅的退出。

 

Tip:优秀设计的金钥匙：只提供用户所需；让初学者尽快变成中级用户；尽可能的预防错误，出错时友善处理；精简和优化交互与任务流程，让复杂的软件清晰易懂；为支持特定行为而设计；持续地改进和优化我们的流程和程序；忽略用户的某些要求，坚信自己的理想和洞察力。

 常见js下载地址：cdn.bootcss.com

 

参考资料

1. 霍克曼. 瞬间之美[M]. 北京:人民邮电出版社, 2009.
2. Adams, C. Web设计创新思维[M]. 北京:电子工业出版社, 2008.