搜索 | 会员  
界面布局和交互设计的一些总结
来源: blog.eood.cn   作者:Bruce Dou  日期:2015-7-22  类别:交互设计  主题:网页设计  编辑:勤勤
在做交互设计的时候首选要考虑到可用性。可点击控件要足够大,离光标足够近。它可以应用在按钮和可点击控件,可拖拽物体上。按钮要设计得足够大

交互设计的两个准则

Hick’s law

Hick’s law 可以总结为:给用户越多选择项,对用户来说更难作出选择,花费时间精力更多。

Fitts’s law

Fitts’s law 可以总结为:可点击控件要足够大,离光标足够近。它可以应用在按钮和可点击控件,可拖拽物体上。
按钮要设计得足够大;屏幕的边缘应该放置重要的链接和按钮(非触摸屏)。

空白的利用和布局

  • 留白非常重要。比如合适的行间距可以提高阅读速度。

  • 内容占的空间会显得比实际多,所有留比你想象更多的空白。

  • 接近原则:人们会把接近的物体当作一组。

  • 相似原则:人们会把形状相似的物体当作一组。

  • 封闭原则:人们会把带缺口的物体想象成封闭的。

  • 延续原则:人们会把排列成一条线的物体想象成延续的。

  • 在一段内容之后的空白可以让人得到休息。

  • 更多空白包围的内容,显得更重要。

利用以上的原则,组织页面结构,强调重要内容,等级分明, 避免重复,让用户更容易导航,找到需要的内容。

大小的利用

大的字体和按钮会吸引用户的注意,是强调突出内容的最好手段。

颜色的利用

尽量使用浅色和白色做背景。
尽量使用纯色。
尽量少的颜色。
尽量使用高对比的颜色组合。

常见设计准则

进度条

进度条应该从 1% 开始,到 99% 结束。这样用户不会在开始和结束的时候误认为系统没正常工作。

行间距

合适的行间距可以改善可读性。对于英文字体,行间距 1.2 倍可以提高阅读速度。

表单

尽量少的元素,让用户更容易完成。比如最简单的注册表单仅仅需要一个 EMAIL (EMAIL发送设置密码链接)。
长表单应该显示在一页内,而不是分成多页让用户完成。
Lable 最好设计成 Placeholder。
(题外话:应该用 SSL 协议发送密码这类信息)

字体

标题应该用大字体并且加粗。
用空白把长文章分段和分组。
粗体用来强调内容。
用缩进来提示段落开始。
不应该用过多的字体大小。

其他

注意整体的平衡。
充分利用对比:大小,颜色,形状,图文。
尽量让不同类的内容有不同的布局。

参考

http://en.wikipedia.org/wiki/Hick’slaw
http://en.wikipedia.org/wiki/Fitts%27slaw
http://artblog.emilygonsalves.com/2009/03/seven-principles-of-design.html
Science to pick color


德仔网尊重行业规范,每篇文章都注明有明确的作者和来源;德仔网的原创文章,请转载时务必注明文章作者和来源:德仔网;
头条那些事
大家在关注
广告那些事
我们的推荐
也许感兴趣的
干货
了解一下吧