良好产品行为的基础
2017-01-17 17:52:19 0 举报
AI智能生成
2
作者其他创作
大纲/内容
设计价值
设计原则
概念原则
设计体贴的软件
关心用户喜好(记录用户习惯)
乐于助人(提供小助手)
具有常识(频繁给用户发送账单)
有判断力(当前帐号异地登录)
及时通知用户(关注的直播要开始了)
可预见需求(在浏览当前界面内容时已下载好后一部分界面的内容)
帮助用户避免犯低级错误(提示是否确认删除)
不问过多的问题(避免提问、提供选择)
设计聪明的产品
利用计算机的空闲周期(后台执行额外的工作,不影响用户当前的任务)
聪明的软件有记忆(可以记录登陆方式以及密码以及功能使用频率)
能够记住细节(保留浏览的位置等)
发挥聪明
缩小决策数量(记录一两个常浏览的标签,而不是全部)
偏好选择(追踪用户较为喜欢的操作)
很多情况下,多数是对的(多数用户选择的需求可以直接覆盖少数用户的需求)
设计社交软件
社会规范(朋友和家庭成员中,比如困难时伸出援手,表达感恩)
市场规范(生意人需要遵守的潜规则,包括物美价廉、守信用等)
帮助用户展现好的一面
用户身份(使用名字/动物形象作为图标)
动态用户形象(可通过动态收集用户习惯并展示出来,比如收集用户在网络社会听歌、写作、购物等信息)
允许简单协作(用户发表的帖子可以添加评论)
知进退(不干扰用户完成某项任务)
尊重社交圈的复杂性(可以包含大量不同圈子的人群)
尊重其他用户的隐私(百度广告太多导致用户不愿再多透露信息)
恰当处理反社会行为(社区管理会删除低俗贴子)
平台和姿态
产品平台
桌面软件
车载系统
网站和网络应用
电话、iPad等移动设备
家庭娱乐系统,游戏机等
专业设备,医疗仪器以及科学研究设备等
桌面软件姿态
独占姿态(长时间占用使用者注意力)
锁定中级用户(使用产品较为频繁的用户)
慷慨使用屏幕空间(全屏使用独占应用,发挥最大空间)
保守的视觉风格(不要使用太多的颜色,并使用保守颜色)
丰富的视觉反馈(设计导航栏、滚动条、标题栏等)
支持丰富的输入方式(可以用触摸、点按等完成操作)
以文档为中心(保持每个独立应用程序的文档视图最大化)
暂时姿态(打开短暂的时间然后关闭)
明亮而清晰(节约空间、但用户又能感知到 比如状态栏上的时间显示)
保持简一(一个窗口只完成一个指定任务)
记住用户选择(重新启动时还会记住上一次的位置和配置状态)
后台姿态(程序在后台服务下载歌曲图片等)
网络姿态
信息类姿态
平衡独占和暂时姿态(显示密度要适当、便于首次使用网站的用户学习和搜索)
独占属性(详细的信息显示最好以独占的方式完成,充分利用空间展现消息)
暂时属性(不常用的网站添加到浏览器)
事务性网站姿态(除了提供物品之外还可以提供购物车、结账、保存用户信息等功能)
网站应用姿态
独占式网站应用(可以当作一个桌面应用,如项目跟踪工具Jira)
暂时姿态网站应用(不用安装也可以偶尔获得使用的信息和功能)
移动设备的姿态
智能手机和手持设备姿态
卫星姿态(比如数字相机、电子阅读器Kindle)
独立姿态(一个单独的工具栏实现全屏和运动型功能、提示框)
平板电脑姿态
左右两次均可支持隐藏工具箱或折叠功能
其他平台的姿态
信息亭姿态(路标、售票亭、外卖点餐器)
远距离界面姿态(远距离用户界面的布局,重点内容聚焦设计)
汽车界面姿态(导航、娱乐、空调等功能)
智能家电姿态(智能洗衣机简单、直接用户一眼就能了解这个功能的设计是怎么操作的)
中级用户的优化设计
永久性的中级用户(非新手而有非专家)
扭转界面(既不迎合新手也不取悦专家,大部分工作放在满足永久的中间用户身上。比如将最精彩使用的功能和部件放在最直接、便利的位置;不太常用的功能隐藏在用户很少操作的界面)
为三层用户设计
新手想要什么(将用户想象成非常聪明但很忙碌的人)
欢迎新手加入(引导页的设计)
使用不同平台的新手(通过导航和功能是用户快速熟悉产品)
永久的中级用户需要什么
快速进入最经常使用的工具
在线帮助
专家想要什么(希望出一些新功能、创新性的东西)
编配与流
流与透明(无论界面多酷,越少越好)
编配(一个界面放5个按钮 还是10个或者100个,合理的编配交互体验会更好)
和谐交互
遵循用户的心理模型(医生对病人信息有自己的心理模型,来源于他们看待病人的态度以及治疗方式)
少就是多(努力减少用户界面元素数量、但不能减少所创造的产品功能,也不增加使用产品的难度)
让用户指示而不是讨论(只提示您输入错误,而不是解决方式)
提供选择,而不是提出问题(用户可以通过选择左转、直行、右转来自动驾驶汽车)
让必要工具近在咫尺(画图类软件,工具箱放在快捷、明显位置)
提供无模态反馈(文档当前显示在多数页 9/180 )
预测其可能性(文章是否保存到草稿箱)
反应对象和应用程序状态(发送短信状态;已发送、未发生、已读等信息)
避免不必要的报告(减少对话框报告,删除成功、登录成功、注册成功)
避免空白状态(能提供一个基本的样式提供给用户)
隐藏一些操作(对应经验较少的用户隐藏一些复杂功能)
优化响应,容许延迟(用最小的延迟提供最合适、丰富的交互,而且允许他们取消导致延迟的操作)
动作、时间与过渡
让用户的注意力集中在合适的地方
展示对象与动作之间的关系
在视图或者对象状态之间的转换中保持背景不变
让人能够看到进度或者动作(进度条/旋转箭头)
创造虚拟空间,帮助用户实现从一个状态向另一个状态的转变(比如段位,青铜到王者)
激发融入进一步操作(做任务实施奖励机制)
短暂愉快的响应(动画时间不宜太久,不应超过目标时间)
苹果改变了“杀掉”进程的方法(向上滑动可退出应用)
过渡动画做到自然又平滑
毫不费力的理想(不用用户惊叹一个产品多漂亮,而是能够不被注意但是使用起来毫不费力)
负担
导航负担
多个屏幕、视图或页面之间(多窗口容易转移注意力,容易打断用户工作流)
窗口、视图或者网页中的多个窗格或者框架之间(可通过分割线隔开/通过标签来识别)
工具、命令或者菜单之间(多项操作可合并为一个组合按钮,折叠后才显示分功能,Menu)
窗格或者框架中显示的信息之间(滚动、平移、放大、缩小等)
拟物化负担
屏幕略显拥挤,苹果设计iOS7以后已经采用扁平化
模态负担
错误、通知和确认信息(用户不care的问题,不需要出现和提示)
不用让用户请求许可(可以直接修改操作,就避免强制用户填入)
样式负担(过渡使用样式图形和界面元素导致界面臃肿)
减少工作 消除负担
减少要去地方的数量
提供导航标志
提供概括
恰当的把控件映射到功能上(图形icon映射)
避免层级关系(不要进行多层嵌套)
不要复制机械时代的模型(重大改变必须显著优秀,比如日历,以前只能上下翻页调整时间,现在可以滑动调整)
隐喻、习惯用户以及可供性
界面范式
实现中心范式界面(每种功能对应一个按钮、每块代码对应一个对话框)
隐喻范式界面(一个icon可以让用户明白其中意义)
直觉、本能与学习(需要敏锐的洞察力;立即理解认知、凭直觉获得的知识或信念;不需要理性思考和推理就能明白其意义,比如使用废纸篓)
全局隐喻的劣势(整个界面斗使用图形映射,用户无法理解或无法辨认所指事物)
习惯用法范式界面
图形界面大多是习惯性用法例子(移动鼠标 看到光标移动,便知道两者是联系在一起的)
好的习惯用法只需要学习一次(关闭框、下拉菜单、单选按钮等学习)
创建习惯用法
了解事物如何使用的基本属性(门旁边有个按钮,大部分都会认为是门铃)
手动能供性
手动能供性的语义学(控件必须有文本或图标标签来指明)
能供性的实现预期(按钮点击时后有高亮状态,向用户表明正在点击)
直接操作与顺从
直接操作的使用(比如想把对象A移动到B直接拖动过去)
顺从与提示
静态提示(比如按钮通过颜色区分提供可否点击)
动态提示(鼠标点击到某个位置时,某块功能才能呈现出可点击状态)
顺从响应提示(鼠标按下没松开,桌面应该改变其状态)
光标提示(光标经过框口框架时变为双箭头暗示可调整)
行为原则
重新思考数据输入
数据完整/数据免疫(用户输入不正确的数据时,程序应该提供更多的帮助来纠正。如果用户名输入不正确程序可推荐一个数据库中不存在的相似名字)
处理丢失数据(比如必须填入金额的情况,需要一些友好的提示让用户完成此操作)
数据输入和规避机制(记录用户操作方便以后检查,比如删除记录等)
审核与编辑(比如你在pages文档里面输入了一个错误的英语单词,会自动识别提示)
重新思考数据存储
保存更改(一般比不保存高出好几个数量级但是页游不保存的情况不得不考虑)
关闭文档但不保存(对于不想保存的文件回到初始状态很方便但并不合理)
另存为(可以改变文档路径,但有时不能重命名当前文档)
自动保存(用户停止输入几秒后可以自动保存输入)
创建副本(和原始文档应放在同一个目录下;用文件加上时间戳或者日期命名)
命名和重命名文档(可直接在当前界面支持重命名,保持文件内容不变)
在文件系统中存放和定位文档(把文件放到用户能找到的地方)
还原所做更改(也就是撤回上一步)
还原所有更改(也就是直接为空,但不用关闭文档可重新开始)
创建版本(不必复制粘贴还可以保证独立性)
重新思考数据检索
存储与检索(其实就是目录和文件夹的概念)
物理方面的检索
位置检索(美团外卖)
索引检索(手机联系人伤的index或者借书编号)
数字方面的检索(比如2017-01-15查找文档)
受限的自然语言输出(本地化语言设计(中国/英国))
防止错误 通知决定
富视觉非模态反馈(比如美团上电影院选座)
听觉反馈
避免负面听觉反馈(警告声很难听)
正面声音反馈(比如苹果提供可爱有趣的Siri)
撤销应当遵循心理模型
抛弃犯错的用户心理模型(大多数人都不愿意承认错误,所以设计过程中应让用户觉得自己是正确且正当的)
撤销让人敢于探索尝试(微信撤回消息可以用来表白哈哈)
设计撤销功能(保证是最近一次的操作且具有独立性,不影响其它功能)
撤销的共通类型
渐增动作和过程动作(比如剪切、复制、粘贴、删除等操作)
隐蔽撤销和解释性撤销(比如固定标签或图标可以撤销操作)
撤销和恢复(有撤销肯定要设计恢复功能来保障良好的用户体验)
撤销的其它类型
不连续的多次撤销
分类撤销
已删除的数据缓冲区
版本控制和还原
冻结
撤销可撤销的(美图效果的前后对比)
为不同需求而设计
易学性和帮助
命令模态
教学式命令、直接命令和隐形命令(直接操作控件来处理拖放或者使用快捷键达到同样效果)
记忆矢量(可通过图文设计来提示用户使用快捷键 比如黑体B 是使用ctrl+B)
有效功能工作集(比如提供模版、基本计算公式和数据模型)
上下文帮助和辅助界面(比如添加引导页和左右滑动引导)
传统的在线帮助(客服)
可定制性
个性化(装饰品阿挂件阿身份象征等)
配置(让用户实施并遵循标准)
物质模态行为(多种操作细节都可以实现同一功能,比如我们使用软件阅读返回上一页,可以点击返回也可以侧滑返回都兼容)
本地化和全球化(时间、语言上支持国际化)
无障碍性
无障碍的目标
用户可以理解所有的提示、信息和反馈
用户可以轻易的操控所有控件并输入
用户能够使用导航并清晰的知道界面所处的位置以及导航结构
无障碍指导方针
利用系统的工具和指南
不要覆盖用户选择的系统设置(用户设置夜间模式,我们不做修改)
使用标准的键盘访问方式(比如输入电话就使用纯数字的键盘)
为视觉不佳的人加入显示选项(放大字体和加粗、高对比度)
不要有闪动、闪烁、闪现等视觉元素(会导致用户晕头转向,陷入混乱)
使用简单、明确、精炼的语言(指示性文本描述恰当的情况下,越简单越容易学会和使用)
响应时间要能满足所有用户(较长的响应时间用户会不耐烦)
使用一致性的布局和任务流程(用户只用记住一种方式就可以完成界面操作)
给视觉元素添加文本解释(帮助用户理解设计这些元素的含义)
整合视觉设计
视觉艺术与视觉设计
视觉界面设计元素
情境(用户是否在黑暗的屋子里扫描屏幕?用户是否在刺眼的阳光下,阅读你的设计?)
形状(分辨不同的形状比分辨大小、颜色更容易)
大小(最好按照有序和量化的变量来设计)
颜色
色值(吸引注意力的好工具)
色调(传递重要意义)
饱和度(和色值意义相似)
HSV 以上三种结合(类似RGB,需要谨慎使用三个变量的变化)
方向(按照生活习惯来设置传递方向)
纹理(扁平化设计中很少出现了。比如阴影效果)
位置(传递层级信息)
文字与版面
使用高对比度文字(确保文字和背景形成对比)
选择恰当字体和大小(太小的字体用户难以阅读)
简洁的组织文字(用做少的文字标明最恰当的意思,避免使用缩写)
动作及其随时间的变化(比如我们加载数据时的进度条)
视觉界面设计原则
传达风格/传播品牌(相似品牌之间操作差距不要太大)
带领用户理清视觉层级(每个界面的重点在哪里)
在组织的每一层提供视觉结构和流(比如ProcessonOn里面的对齐网格、对齐标签、组控件保持相等间距等)
在特定屏幕上告诉用户能做什么
使用图标(图标设计和渲染可以帮助用户更好的学习和操作功能)
传达功能感
同时表达动作和动作施加的对象,以增进理解。
小心使用与用户想象中不同的隐喻和表现方式
保持图标简单,避免过多的视觉设计
尽可能重用元素,用户只需要学习一次
把视觉符号与对象关联起来(比如每个图像文件都有一个缩略图做代表;或者没加载出图片时提供默认图)
简单渲染图标和视觉符号(少使用颜色和阴影保持适当大小)
尽可能预览视觉效果(markDown的实时预览)
响应命令(比如复制一段文字,会有一个复制区域提供给用户)
把注意力吸引到重要事件上(建立在大小、颜色、动作的对比之上)
最小化视觉工作量
过分装饰(有点喧宾夺主的感觉)
不渲染任何信息(辨别度会很小操作难度会更大)
元素过分拥挤(密集恐惧症)
使用太多颜色(烟花缭乱)
无力的视图层级(用户根本不知道自己处于哪个位置)
保持简单
有限的色盘(不饱和或中性颜色为主,不刺激用户视觉)
有限的字体(保证页面的排版和统一性)
删减内容(直到破坏了设计,再把最后去掉的东西加上。“完美不是加无可加,而是减无可减”)
视觉信息设计的原则
加强视觉对比(比如股票,采用不同颜色的折线图供给用户参考趋势)
显示因果关系(比如删除后内容将全部清空)
显示多个变量(比如购物价格优先、质量、好评等提供给用户更多的筛选信息)
在一个界面中整合文本、图形以及数据(可以更形象的向提供用户信息)
确保内容的质量、相关性和完整性(不可靠或低质量的信息会破坏产品内容、行为和视觉品牌建立起来的用户信任)
可量化的数据就要量化(虽然有些数据可以用图解的方式展示给用户,但是还是要用数据本身显示,比如占用内存)
一致性和标准化
界面标准化的益处(提供了易学性和易用性)
界面标准化的风险(可延伸性太小)
标准、指南和经验法则(按照自己本产品的情景设计用户需求而不是遵循某些规则)
什么时候打破规则(除非你你有更好的其它选择)
界面原则
桌面应用
分析桌面应用
主窗口和辅窗口
主窗口(可移动的、可放大缩小、用于盛放内容和功能的容器里面包含多个辅窗口)
菜单和工具栏(苹果手机里面的Tabbar)
内容窗格(可编辑的表格)
索引窗格(通讯录里的索引)
工具版(PhotoShop里面的工具版)
侧栏(位于主窗口的左侧右侧或上下两侧可折叠)
辅窗口(支持主窗口,提供属性和功能,工具版/侧栏)
主窗口的结构
桌面系统中的窗口
折叠窗口(NewMacbook屏幕很小很适合把应用中的部分功能折叠起来)
平铺窗口(多个应用程序使用统一的小矩形均分屏幕)
虚拟的桌面空间(一个小企鹅图标代替整个QQ应用)
全屏应用(当单个应用占领主导地位时,会占据整个屏幕)
多窗格应用(比如印象笔记里每天日记都会有一个框口通过矩形分开)
窗口状态(最小化、最大化和多元化)
窗口的运用
不必要的房间(Adobe Photo 中修改一个内容会先弹出一个提示框来修改,而Adobe Lightroom可以把操作安排在靠近编辑的位置直接显示出来)
必要的房间(裁剪一个图片)
菜单
把菜单作为教学工具(尽量直白、不要使用行话)
禁用的菜单项(菜单项与所处状态无关的情况需要自行禁用(置为灰色不可点击状态))
复选标记菜单项(如果某些属性的启动和禁止很频繁就放入工具栏,不常使用就放入对话框中,比如显示工具栏功能)
菜单上的图标(相同的命令使用相同的视觉符号)
快捷键
遵循标准(不与硬件设计相违背)
形成日常使用快捷键的习惯(与大部分编辑器都保持统一命令)
标明如何使用它们(Ctrl+S 保存)
级联菜单、单层分组(比如美团上会有两个联动的表 ,一个表显示分组一个表显示详细内容)
工具栏、工具版、侧栏
工具栏按钮(并不需要告诉用户其用途,但要用容易辨识)
工具提示(鼠标点击某个图标时才显示文字描述,便节省了屏幕空间)
可移动工具栏(工具栏遮挡界面时可移动,不会影响其它功能)
弹出工具栏(比如刚打开电脑,点击鼠标右键会出现属性、桌面背景等)
点操作、选择、直接操作
鼠标的人体工学(浏览和选择任务要同时提供鼠标和键盘支持)
鼠标按键和控制
单击(停在目标上)
指向和单击的组合(移动到不同位置的事物上)
单击拖放(改变位置、大小、形状等)
双击(单击选择对象,双击选择对象然后采取动作)
合击(全部选中后操作,一般我们都会使用Shift)
触控板、轨迹球、手势传感器(苹果笔记本采用多点触控鼠标和多点触控版操作,要对基本手势有所了解才能使用)
光标(屏幕上鼠标的可视代表物)
选择(苹果手机在选择图片上支持区域性的选择和实现了电脑上的功能)
拖放(拖放的对象必须在视觉上表明它们的接受能力,拖放光标必须在视觉上表明源对象,任何可滚动的拖放的目标对象都必须支持自动滚屏)
移动设备和其他设备
分析移动应用
移动设备的外形大小
手持设备
平板电脑
iPad mini
设备上的设计模式
堆叠(非游戏应用上最多的一种主要模式,由导航、选项卡Tabbar、内容元素的堆叠布局))
屏幕轮显(通过左右的滑动快速显示内容,如滚动视图ScrollerView)
方位和布局(拍照屏幕自动旋转设计也相应调整)
关于移动导航、内容、控制的习惯
浏览控件
列表(通常会和标签栏在一起(Tabbar)提供多屏访问)
网格(每个小的应用程序通过应用的图标、缩略图、功能图标等内容组成的规则形式运用网格的当时展现)
内容轮显(相册中的相片儿可以上下滑动浏览)
泳道(一个标签对应一个区域的内容)
卡片(用来封装一些用户在意的有用信息片段,比如昵称、时间、信息、位置等)
导航和工具栏
标签栏(例如,Tabbar包含一系列的文本和图标,一般使用在屏幕下方)
更多... 控件(一般建议标签栏红的项目数量不超过5个 超过5个则考虑放在更多的控件来处理)
标签轮显( 也可以解决更多的问题,比如今日头条上面的标签栏)
导航栏和动作栏(放在屏幕顶端,为数据提供导航。也叫做动作栏提供回退等效果)
工具轮显(美颜相机效果都会放在底部,通过滑动轮显找到想要的效果)
抽屉
次要动作抽屉(QQ点击头像左侧滑个人资料)
双抽屉(左右抽屉)
要避免的抽屉行为
不要过度运用动画的屏幕旋转
不要过度使用弹出窗格和滑动窗格
抽屉效果饱受争议(但是用户经常使用的应用,抽屉效果很有帮助,但用户很少用到的应用根本不会留意这里应用里还有个隐藏的抽屉)
搜索、排序、筛选
隐式排序和显示搜索(跟踪用户浏览过的、喜欢做的、或者购买过的东西来推荐用户可能需要的东西)
构建搜索需求
语音搜索(目前技术还不完善,虽然简化了输入过程,但还是会出现很多错误)
自动填充(当用户输入字母时就自动补充一些常用词汇,减少工作量、提高用户体验)
预加载(进一步细化了自动填充,把用户输入的词语预先加载到搜索列表中提供给用户选择)
最近/频繁搜索建议(用户喜欢反复搜索同样的东西,我们应该记录并按照最常用以及最近的条件呈现出来)
自动推荐(采用模糊匹配的技术、综合考虑、自动拼写更正词汇等因素)
分类推荐(搜索输入某些字母时,把相关内容分类展示出来,比如搜索leona 会按照联系人、歌曲、邮件等分类)
排序和筛选(美团的这个功能想必大家都很熟悉了就不再多说)
欢迎和帮助界面
引导页(欢迎界面,首次启动或者有重大版本升级或者新版本新功能的时候才会被激活)
蒙板(半透明,显示出提示和帮助,并将箭头指向具体控件或标出何种手势)
工具提示蒙板(显示当前界面的主要功能、适合在帮助界面上)
其它设备
一般性设计原则
不要把正在设计的产品认为是计算机
把硬件和软件设计集成在一起
让使用情景来驱动设计
模式的运用要明智
限定范围
要根据显示器的分辨率来考虑导航
尽可能的简化输入
为专用手持设备而设计
考虑用户如何持握和携带该设备
尽早决定设备是单手操作还是双手操作
避免使用多个窗口或者弹出窗口
为信息台而设计
交易型信息台(火车站、电影院的自动售票机,希望可以最快且又无痛的方式解决问题)
探索性信息台(教育和娱乐性信息台,提供辅助信息,比如广场引导地图)
管理输入
确保单击对象够大(对比度要高,以防误操作)
保守使用软键盘输入(不过只适用于少量文字)
避免使用拖放(信息台一般没有时间在触摸屏上学习这种操作)
为大屏幕界面设计(65寸电视机)
屏幕的布局和视觉设计要清楚,即使在较远位置也可以轻松、清晰的看到
屏幕导航要简单
始终牢记控制集成(把多个遥控器集成到一个操控器上)
遥控要尽可能简单(按钮太多,复杂度增强)
重点放在用户的目标和活动,而不是产品的功能
网页设计
基于界面的交互
导航和寻路
一级导航(一般置于顶端,设计尽量缩短页面主题、简洁有力)
二级导航和更深层级的导航(点击一级导航时会展示一大块内容,是模态且又临时的,不会占用屏幕空间)
内容导航(把每个文章的标题和简介列出来,排成一个序列或者将图片组织成画廊的形式并列等间隙显示)
搜索(自动填充,自动推荐、分类推荐可以帮助显示出用户正在输入但尚未完成的词语和内容,和应用端一样)
滚动
页眉和页脚(页面顶端和底部,一般搜索框都固定在页眉上,页脚则适合用户阅读完毕后推荐用户下一步操作的建议)
分页和无限滚动(无限滚动和页脚是互斥的,因为看不到底部,一般新闻类可使用无限滚动,只关注当前屏幕上的内容,但是如果用户需要快速到达列表底部或回到先前的某个位置,则不要使用无限滚动)
移动网页(如果网站只有一个版本,一定要根据屏幕尺寸设计成自适应的)
未来(网页将成为软件和媒体交流的重要场所)
设计细节、控件和对话框
控件
命令控件
按钮(现在都是扁平化设计了,但是按下时还是要提供给用户操作按钮的状态)
图标按钮(常见、容易记忆。但有些图标很难理解其确切含义)
超链接(超链接可以把用户带入下一个网页用于导航,按钮用于动作)
选择控件
复选框(网页设计一般复选框都采用方的,而iOS突破了方形传统采用了圆形设计)
开关按钮(按下的时候按钮保持凹进,再次点击突起,学习起来比较简单)
状态切换按钮:一种应该避免的选择习惯用法(比如音乐播放器使用同一个位置切换不同的状态,效率很高,但是也存在矛盾,不过大部分用户都比较聪明已经习惯了这种设计)
列表控件
做记号(选择复选框提供选择)
在列表中拖放(可以把一个文件移动到另一个文件夹内)
列表排序(允许对文件类型、修改日期、文件大小进行排序)
列表中的水平滚动(可垂直滚动文本,但不要说水平滚动,因为这样每行都有几个字看不到)
下拉列表和弹出列表(前者更专注对条目做出选择,后者更专注执行命令,比如搜索会弹出一个可下拉列表)
组合框(控件显示当前的选择,但可以提供弹出列表显示当前状态)
树形控件(按照层次数据结构思考问题,如文件系统导航)
输入控件
有界输入控件(比如用户输入一个17,但是我们提示只能输入4到8的数字这是不合理的,我们应当设计为只有4-8之间的数字键盘,可以避免用户输入无效的值)
无界输入控件(可以接受用户输入任何数据包括文字数字表情,但是这样在我们后台无法处理的情况下也会存在数据问题)
微调器(比如购物车小幅度修改用户可以选择加减操作,大幅度操作可以直接编辑)
验证输入控件
主动验证(如输入金额键盘只显示数字)
被动验证(等用户提交完成后验证)
暗示(检测用户输入错误的情况下,在其附近弹出一个不影响修改输入超出1s以上的提示框,输入规范后消失)
处理出界数据(如果最高限制金额是500,用户输入100000,那么调整为最高限制金额)
单位和度量(比如提供适用于用户阅读的可选择字体大小范围)
显示控件
文本控件(一般用于编辑和修改信息)
滚动条(显示当前滚动位置)
分割线(两个不同区域或段落之间的区分)
对话框
合理运用对话框(一般用于应用熟悉并频繁使用的用户,控制更高级或更危险的设置,比如AlertView)
对话框的基本交互(至少提供一个终止命令控件出发消失,比如关闭按钮)
模态和非模态对话框(模态对话框就是我在处理一个界面任务时必须终止后才能执行别的任务,比如弹出是否删除的提示。非模态对话框比如在阅读时有个短信通知)
对话框的五个目的
属性对话框(放在侧边栏中比如PhotoShop中的工具栏可折叠)
功能对话框(是否删除某些操作等)
进度对话框(把应用程序目前处于的状态呈现给用户)
通知对话框(比如短信推送、邮件等)
公告对话框(一般比较粗鲁的提示,分为错误、警告、确认三种情况,比如系统无响应,请退出后重试,给个OK按钮)
管理属性对话框和功能对话框
不要堆叠选项卡
界面层次不要太深,二级对话框再调度一个三级对话框不是一个明智的做法)
消除错误、警告和确认
错误对话框
如何消除错误信息(内部重新评估无效数据)
让错误不可能发生(让用户输入内容保证正确有效)
正面反馈(告诉用户输入错误,用户会很没面子,应少些批评多些善意的提醒和鼓励)
特例(一些关系用户利益等方面的通知必须提醒,比如断网导致用户无法交易)
改进错误信息(提示内容始终要有礼貌、表达清晰又要助人为乐)
警告和确认
如何消除警告(避免阿谀奉承,没必要每个操作都提示用户是否处理)
确认(用户点击删除时直接移到废纸篓,而不是提示确认删除,尽量让所有动作都可以撤销,如果是准备清空废纸篓就不用再撤销其操作了)
如何消除确认对话框(最好提供可解决办法而不是对话框,比如图片过大无法裁剪,直接进入裁剪界面而不是告诉用户请剪切一下再上传)
魔鬼在细节里(确保细节上的交互帮助用户完成目标、任务以及愿望,哪怕只是改善一个像素)
设计模式
0 条评论
下一页
为你推荐
查看更多