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
参考资料
- 霍克曼. 瞬间之美[M]. 北京:人民邮电出版社, 2009.
- Adams, C. Web设计创新思维[M]. 北京:电子工业出版社, 2008.
Web设计快速入门的更多相关文章
- Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard http://silverlightchina.net/html/tips/2010/0329/934.html
Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard 时间:2010-03-29 11:13来源:SilverlightChina.Net 作者:jv9 点击: ...
- Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard
上一篇,介绍了Silverlight动画设计基础知识,Silverlight动画是基于时间线的,对于动画的实现,其实也就是对对象属性的修改过程. 而Silverlight动画分类两种类型,From/T ...
- 三 Flask web开发快速入门
1:会话: from flask import Flask, url_for, request, render_template, session from werkzeug.utils import ...
- [转]Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard
上一篇,介绍了Silverlight动画设计基础知识,Silverlight动画是基于时间线的,对于动画的实现,其实也就是对对象属性的修改过程. 而Silverlight动画分类两种类型,From/T ...
- JMeter Web测试快速入门教程
学习前的准备 学习本教程前,你的电脑上至少应该有Apache JMeter这款软件.如果你没有,点击此处下载. 当你点进去后,你会发现它是一个依赖Java的软件 因此如果你电脑上没有Java环境,你应 ...
- Java Web Services (1) - 第1章 Web服务快速入门
SCRIPTS_DIR=/Users/liuzhaofu/opus-dev/product/tools/devPRODUCT_DIR=/Users/liuzhaofu/opus-dev/product ...
- Web Service快速入门
一言以蔽之:WebService是一种跨编程语言和跨操作系统平台的远程调用技术. 那么它是如何做到这种跨语言,跨平台之间的调用呢? 其实它是以一个xml文件以及webservice这种服务来实现跨平台 ...
- web前端开发入门全套学习方法路径,兼职在家做网站也能月入上万!
前端学习路径 1.WEB前端快速入门 在本阶段,我们需要掌握 HTML 与 CSS 基础,当然,也包含 H5 和 C3 的新特性.这个部分内容非常简单,而且非常容易掌握.相信你也更愿意学习这个部分,毕 ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
随机推荐
- WHAT I READ FOR DEEP-LEARNING
WHAT I READ FOR DEEP-LEARNING Today, I spent some time on two new papers proposing a new way of trai ...
- Javascript中的垃圾回收机制
Javascript 中的内存管理 译自MDN,Memory Management 简介 在底层语言中,比如C,有专门的内存管理机制,比如malloc() 和 free().而Javascript是有 ...
- js数组方法forEach,map,filter,every,some实现
Array.prototype.map = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "fun ...
- linux命令中which、whereis、locate有什么区别?
1.find find是最常用和最强大的查找命令.它能做到实时查找,精确查找,但速度慢. find的使用格式如下: #find [指定目录] [指定条件] [指定动作] 指定目录:是指所要搜索的目录和 ...
- 洛谷 P4656: LOJ 2484: [CEOI2017]Palindromic Partitions
菜菜只能靠写简单字符串哈希维持生活. 题目传送门:LOJ #2484. 题意简述: 题面讲得很清楚了. 题解: 很显然从两边往中间推,能选的就选上这个贪心策略是对的. 如何判断能不能选上,直接字符串哈 ...
- Route Between Two Nodes in Graph
Given a directed graph, design an algorithm to find out whether there is a route between two nodes. ...
- House Robber I & II & III
House Robber You are a professional robber planning to rob houses along a street. Each house has a c ...
- casper Dom的操作
phantom.casperTest = true; phantom.outputEncoding="utf-8"; var casper = require('casper'). ...
- WPF 中定时器的使用
DispatcherTimer timer; private void Window_Loaded(object sender, RoutedEventArgs e) { timer = new Di ...
- Ubuntu下SSH安装
step: 1.输入命令: sudo apt-get install openssh-server 2.验证sshserver是否启动了,以下两条命令均可 ps -e | grep ssh netst ...