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.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黒之染开发日记

在手机web中播放视频(使用js,不使用video标签,支持直播)

jsmpeg只支持mpeg格式的视频,jsmpeg官方建议用ffmpeg来转格式。ffmpeg下载地址

1.4K50
来自专栏web前端教室

根据设计图对工作量进行“预判”

今天的标题中的预判,意思就是预先判断。根据设计图,对此项目可能发生的工作量,进行预先判断。一般开新项目之前的会议上,每个人都要报一个预估的工期,这个工期就是根据...

21860
来自专栏BestSDK

用户为王(一)

image.png 作为一个热爱为移动应用工作的产品设计师,为了寻找新鲜的交互和精彩的视觉体验来刺激我的灵感,我每周都会下载大量的手机应用。这么做有时候会捡拾到...

28370
来自专栏花叔的专栏

Nodes小程序追加评论功能

话说,最近深圳发生了一次恶性的超市砍人事件,事发点所在的超市竟然位于花叔第一套房子所在的小区!

303110
来自专栏葡萄城控件技术团队

Wyn Enterprise 核心功能:行业领先的在线数据报表设计体验

Wyn Enterprise 将 BI 和报表融为一体,创新性的在线报表设计功能,提供类似微软 Office 产品的使用体验,功能丰富却极易上手。对软件公司而言...

19000
来自专栏大前端开发

《大前端开发》培训2周小结

经过两周的培训,以及大家的努力,每个人的成长都非常的快。零基础的同学也已开始对HTML、CSS以及JavaScript有了比较形象的认识,开始建立起了编程思维,...

10320
来自专栏君赏技术博客

听了2017年 Swift 开发者大会一些感想

特别感谢@Flow.ci提供门票支持。 2017Swift 开发者大会在深圳举办了两天,第一天是外国嘉宾。因为需要上班,加上全天都是英文,去了也是听不懂,星期...

13420
来自专栏企鹅号快讯

12 月份新增开源项目:手机都可以变个人监控系统了?

摘要: 看看开源中国社区 12 月份有哪些值得关注的新增项目:有将手机变成个人监控系统的 Haven,有中文语音对话机器人项目 dingdang-robot,有...

26650
来自专栏ThoughtWorks

弯道超车!后端程序员的Angular快速指南|TW洞见

今日洞见 文章作者、图片来自ThoughtWorks:汪志成。部分图片来自网络。本文版权属ThoughtWorks公司所有,如需转载请在后台留言联系。 友情提示...

323100
来自专栏互扯程序

设计图都不会画,还想做”架构师“?

什么是系统架构师? 系统架构师是一个既需要掌控整体又需要洞悉局部瓶颈并依据具体的业务场景给出解决方案的团队领导型人物。一个架构师得需要足够的想像力,能把各种目标...

8.2K100

扫码关注云+社区

领取腾讯云代金券