UI设计成长笔记 No.17

本期目录

设计总结


设计总结


交互设计7大定律


摘录

除非有更好的选择,否则就遵从标准
————交互设计之父 阿兰·库珀


总结


定律1: 费茨定律

从任意位置移动到一个目标位置所需时间由两个因素决定:距离及目标大小,距离越近所费时间越短,目标面积越大,所费时间越短.在产品界面设计中的主要作用是提高产品的可用性,帮助用户更快速的完成某个操作或任务流.

在设计中到应用

  • 抖音 : 系统判断手指与屏幕的接触位置,并将模态弹窗的操控按钮显示在离用户手指最近的位置
  • QQ : 登录界面,登录按钮面积恰好比大拇指端的面积大一些(考虑拇指点击的舒适性),而且按钮所在的位置无论是唤起键盘或未唤起键盘,始终保持在拇指可触的舒适位置.
  • PC端后台 : 长表单的决策按钮设计一般有2种处理方式 悬浮于窗口底部,不受滚动区影响 or 置于页面上方,页面滚动超出按钮时,按钮形成“固钉”,在窗口内始终可视

注意:并不是所有的交互方式都需要考虑最近的距离,有些需要考虑远的距离

目标尺寸大小要合适

  • iOS 人机交互指南中规定了最小点击热区为44*44
  • 热点尺寸区别于元素可见尺寸,即可见元素大小即为热区大小或热区大小大于元素可见大小

拇指在屏幕上的移动范围图
屏幕的边边角角很适合放置菜单栏、按钮组及一些辅助性操作


定律2: 米勒定律(7+/-2法则)

人大脑短时记忆容量约为7,并在7+2和7-2之间浮动.在设计中利用其减少用户认知负荷,提高信息易读性.界面中的米勒定律主要强调的是信息与信息之间的组合模式.

在设计中的应用

  • 手机号的3-4-4 分段
  • 长文本纯文本段与段之间的留白
  • 导航和选项卡通常不要超过9个,如果超过了可以通过聚合按钮来包含其他次要入口或子入口.
  • **移动端标签栏一般不超过5个、选项卡一般不超过7个,如果有更多,可以左滑查看/通过聚合按钮查看
  • 系列位置效应:

首因效应 相对中间位置,我们对系列最前面的物体记忆更清晰
新近效应 相对中间位置,我们对序列末尾的物体记忆更清晰

即:大脑倾向于回忆起事情的始末,最不容易回忆起中间的内容.
在设计中的应用:详情页可以分为 开头/中间/结尾 三部分


定律3:席克定律

一种心理物理学定律,用户面临选择数量越多,作出选择花费时间越长.在人机交互界面中选项越多,意味着用户作出决策时间越长.在设计中应该思考“在不妨碍用户选择的情况下,如何提供较少的选项”,可以对选项进行同类分组和多层级分布,提升用户使用效率.

在设计中的应用

  • 遥控器功能的整合
  • 减少选项并提供默认值,方便用户选择
  • 遵从用户无意识的行为惯性,如常规的单选/复选框,一般圆形是单选、方形是复选
  • 选项分类分层,信息区分主次
  • 分步完成,分部显示
    分解复杂流程:让用户一步步操作,而不是求安布堆到用户眼前,强调一个页面只做一件事原则
    场景细分:能将信息整合为选项的,不让用户输入

定律4:接近法则(亲密性)

我们通常把位置相对靠近的事物当作一个整体
接近法则是格式塔理论中最常用的一种法则,在界面中的体现是把相关信息块组合在一起,不太相关的分离开,增强与区分元素之间的关联性,所强调的是空间和位置

在设计中的应用

  • 列表页面通过色块区分组
  • 留白在界面中发挥至关重要的作用,留白能引导用户眼睛,区分视觉层级
  • 信息较多时,也可通过块来划分功能区域

定律5:泰斯勒定律(复杂性守恒定律)

每一个过程都有其固有的复杂性,这个复杂性有一个临界点,超过这个点就不能再简化了,只能将固有的复杂性从一个地方移到另一个地方.交互设计师在面对复杂需求、复杂场景、复杂流程、复杂页面时,如何在不影响业务和功能的情况下,保证用户的使用体验,而不是为了页面简洁、设计趋势而删减功能需求,导致最终功能不能满足用户.

在设计中的应用

  • 复杂的任务里关注使用者使用过程中关注或聚焦的一部分,可以将任务拆分完成或分割成独立简单的任务.
  • 针对功能操作或信息传递的复杂:交互设计四策略(删除/组合/隐藏/转移) 当中的“组合”使用可以解决这个问题.如,将信息组织更便于理解、识别/将次要并繁琐的转移或隐藏/将没有必要的删除,即归繁为简、删繁为简.
  • 改革式的复杂:利用新规则、设备、技术把复杂转移出用户的眼睛.
  • 界面中的复杂转移到技术的复杂

定律6:奥卡姆剃刀原理

勿用较多东西去做较少东西就可做好的事:如无必要,勿增实体,即简单有效原理
以结果为导向的思维模式.

在设计中的应用

  • 设计功能性页面时,养成动手前先理解用户使用场景和行为的习惯.
  • 简单的页面让用户一眼找到他们感兴趣的内容,修剪设计中多余的元素,去除杂质
  • 恰到好处的留白和清晰的信息指引
  • 优先展示重要功能
  • 减少点击次数,给予合理的选项
  • “外婆”规则,年龄大的用户也能轻松使用你的产品,符合大众认知的设计:

符合现实的任务流程
符合生活映射的图标
一眼能看懂的提示文字


定律7:新乡重夫:防错原则

用户在界面中发生错误的大部分是设计和开发过程中的疏忽造成的,而不能认为是用户操作疏忽.

在设计中的应用

  • 在录入长表单中,前端和后端及时检测录入信息的有效性和正确性,而不是用户填完后提交时再提示哪一项错了
  • 错别字识别系统及 查看 按钮位置在提交位置处
  • 3个纬度细分“防错原则”:

操作前 友好提醒:

详尽的说明文字,突出显示
当结果不可逆时,询问用户让其知道操作的后果
选项比输入更简单,并提供默认选项

操作中 实时感知:

对用户的操作进行视觉化呈现,并及时反馈
适当限制用户的某些交互操作

操作后 及时反馈:

错误发生时及时反馈错误并提供纠错帮助
允许用户犯错,并支持操作可逆(即撤销以前的指令)

以上定律在实际项目中只是起到了参考和启发作用,并不能完完全全指导项目.


源自 一篇文章读懂交互设计7大定律



软件操作


8个sketch软件操作新技能(原创)


1. symbol有一个特性:只要是一个画板尺寸,就算是一个overrides,即symbol中画板尺寸相同的将出现在同一个复选框中

2. sketch中如何把路径转化为矢量图形?
outlines 功能

3. 如何关闭sketch对齐像素网格功能?
sketch-preference-layers-pixel fitting
注:在做 UI 界面的时候我们一般都需要开启对齐像素网格功能,但是在绘制图标或者插画时我们一般都需要关闭对齐像素网格功能.所以说这个功能还是比较常用的.我们可以在 sketch 中给 对齐像素网格功能 的开启设置一个快捷键

4. 如何让文字跟着路径走
勾勒需要的路径-打好文字-选中两者(路径图层需在文本图层上方)-菜单“text”-“text on path”即可

5. sketch在绘制直线时最好都用矩形来画

6. symbol中文本特性:自动根据右边内容延展,始终保持和右边内容间距不变
根据这一特性,我们可以作出以下两种样式:

文字样式为左对齐,文字右侧有图形,则我们在改变文字内容之后,右侧图形会随着文字都字数而保持与文字都间距不变
文字样式为居中对齐,文字右侧有图形,假如这是一个按钮,则在改变按钮长度的时候,文字和图形会自动居于按钮中间

7. 在 UI 设计中,每出现一个文字样式,都要把它做成 text layer,以方便调整和保持整体的统一.对于 text layer 的命名方式我们可以根据它的四个属性来命名:字号、颜色、粗细、对齐方式.

8. 关于 新建文字样式
写个字-creat-命名 ( 黑色/40/左对齐/正常 )-若修改其样式会带星号-update



想有更多交流欢迎添加本人微信:Cymaizi

1



comments powered by Disqus