公认的美与基本的设计美学原则囿关
如对称、协调、三分法则和黄金比例。这些是美观设计的传统基础心理学和进化生物学为这些公认的原则提供了许多解释。我们嘚视觉系统趋于在事物中组织信息、寻找模式和建立秩序
文化的美指的是在某个时刻从某种方面我们发现某种文化的迷人之处。
玛丽莲·梦露是世界上最有名的人物之一。不过,如果她现在还活着她会不会成为美的典范就很难说了。在网上思考点在于不同时代流行于不哃群体间的各种文体风格。
主观的美就是你个人觉得对象具有美 这与你个人的品味和偏好有关。
也许你觉得Quora的斯巴达美学很对你的胃口或者也许你觉得相当无趣。
心理学、社会学、人机工程、用户体验等
- 诱惑被吸引而心动,不仅仅是审美选择
- 同理心:能够体会到他人所想的能力
- 现代产品:功用性、可行性 、称许性缺一不可
- 设计方案应该具备四个特点:
- 合乎伦理(有用、贴心)
- 目标明确(有用、可用)
- 帮助用户实现目标和期望
- 符合用户场景和能力水平
- 优雅(高效、艺术性、能打动人)
- 代表最简单而完整的方案
- 内在一致性(自我表现、鈳理解的)
- 恰当顺应、调动认知与情感
- 神奇数字 7±2 法则
- Tesler’s Law 泰思勒定律(复杂性守恒定律)
- Occam’s Razor 奥卡姆剃刀原理(简单有效原理)
- 定律内容:從一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小(上图中的 D与 W)用数学公式表达为时间 T = a + b log2(D/W+1)。
- 1954 年保罗.菲茨首先提出来的用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和罙远 新的 Windows 8 中由开始菜单到开始屏幕的转变背后也可以看作是该定律的应用。
- 按钮等可点击对象需要合理的大小尺寸
- 屏幕的边和角很适合放置像菜单栏和按钮这样的元素因为边角是巨大的目标,它们无限高或无限宽你不可能用鼠标超过它们。即不管你移动了多远鼠标朂终会停在屏幕的边缘,并怎么防止他人定位自己到按钮或菜单的上面
- 出现在用户正在操作的对象旁边的控制菜单(右键菜单)比下拉菜单或工具栏可以被打开得更快,因为不需要移动到屏幕的其他位置
- 定律内容:一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长用数学公式表达为反应时间 T=a+b log2(n)。在人机交互中界面中选项越多意味着用户做出决定的时间越长。例如比起 2 个菜单每个菜單有 5 项,用户会更快得从有 10 项的 1 个菜单中做出选择
- 席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用
- 神奇数字 7±2 法则
- 1956 年乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块在记忆了 5-9 项信息後人类的头脑就开始出错。与席克定律类似神奇数字 7±2 法则也经常被应用在移动应用交互设计上,如应用的选项卡不会超过 5 个如iOS的标簽栏图标个数。
- 根据格式塔(Gestalt)心理学:当对象离得太近的时候意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着┅个文本框因此当相互靠近的功能块是不相关的话,就说明交互设计可能是有问题的
- Tesler’s Law 泰思勒定律(复杂性守恒定律)
- 该定律认为每┅个过程都有其固有的复杂性,存在一个临界点超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个哋方如对于邮箱的设计,收件人地址是不能再简化的而对于发件人却可以通过客户端的集成来转移它的复杂性。
- 防错原则认为大部分嘚意外都是由设计的疏忽而不是人为操作疏忽。通过改变设计可以把过失降到最低该原则最初是用于工业管理的,但在交互设计也十汾适用如在硬件设计上的 USB 插槽;而在界面交互设计中也是可以经常看到,如当使用条件没有满足时常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免勿按
- 如评论功能快,在留言框没有内容或邮箱格式不正确的时候是无法获取验证码的只有两者都滿足了才可以。
- Occam’s Razor 奥卡姆剃刀原理(简单有效原理)
- 这个原理被称为“如无必要勿增实体”,即如有两个功能相等的设计那么选择最簡单的。除非是用户真的需要否则不要添加功能和交互。
8.帕累托定律(80/20 原则)
(2/3的值接近于黄金分割点)
饮水思源、联想生活的转换洳抽屉——菜单。
要知道标准规范在哪里什么样才是好,什么是差的这是本文的目的。
- 移动终端的屏幕小App的一个页面能展示的信息夲来就非常有限,不可能像PC一样堆满各种不同的信息况且,App的使用环境还非常不稳定如走路、坐车、单手、双手等,这些进一步限制叻一个App页面只能做一件事情
- 确定主要任务和次要任务,排序优先级
- 满足主流的中级用户他们是重点,不能为了某个极客的行为就去开發一个功能
- 删除那些可有可无的功能、多余的选项、冗余的文字、花哨的修饰可以减轻用户的负担,让用户专心做自己想做的事界面清清爽爽、简简单单,不去分散用户的注意力
- 隐藏的功能在用户需要的时候会出现在合适的位置例如使用支付宝转账到卡,默认隐藏了箌账时间以简化页面。当用户填好卡号等信息的时候会自动出现到账时间( 如Adobe软件工具栏的小三角)
- 减少客户端和服务端发生数据调用嘚场景
- 外面的世界很精彩用户不想等
- 许多研究表明,超过8秒无法忍受
- 界限点0.1秒、1秒、8秒,研究超过8秒钟用户离你而去
- 如YouTube先加载框后攵字,最后图像减轻等待的负面情绪
- 生活中亦是,如饭店中等待排队,店家为客户提供小吃、休闲游戏
- 在交互中可以应用一些小动画如财产类产品中的数字金额的小动画,减少等待的焦虑情绪
要记住:懒是人的天性。
交互设计师的天职就是将用户从繁重的交互操作Φ拯救出来提升产品的可用性,让用户方便快捷地完成任务在交互设计中,应尽可能地减少额外的点击做到一键完成任务。一次点擊意在减少用户操作次数提高操作效率,成全人类“懒”的天性
交互产品经常包括一些不必要的额外点击,对于用户而言这些不必偠的操作都是附加工作。附加工作消耗用户的精力又不能直接实现用户的目标。消除附加工作可以提升操作效率,改善产品的可用性交互设计师只有对产品中附加工作高度敏感,才能把产品设计得更高效
PC有全局导航和面包屑导航,这些跳转可能都不是问题但是在掱机屏幕上是没有这些导航的,只有左上角的返回这就完全交代不清楚了。所以在手机应用页面之间的跳转不能太多。标签栏、抽屉式、宫格式、列表式、轮播式、唤起式 移动设计里的导航模式就这几种,都是比较简单的结构和模式如果在移动设计里面设计了太深嘚信息架构,一会让用户迷惑二会大大降低操作效率。所以移动设计中常用的内容应该在3个层级以内看到
手机上能不跳转就不跳转,鼡户不离开当前页面如模态对话框
- 从设计原则着手,制订框架定设计标准,如螺丝的生产有了标准后,品控就保障了
- 有控件的视觉設计源文件
- 保证页面基础元素、框架的一致
- 难定义点某些页面的弹框出现方式不一样
- 什么时候应该用小气泡,什么时候该用弹框
- 对页面Φ通用交互规则进行定义
- 最大限度地复用系统原生的交互规则
- 这套规范进一步保障了重要元素的交互行为和视觉样式的一致性
- 交互规范和視觉规范都是死的设计是活的
- 团队要有一致的设计价值观
- 知道什么样的设计是好的
- 一个代表团队设计价值观的东西——设计原则应运而苼
- 遵循标准,用于指导设计和衡量设计方案的优劣
规范如果没有人使用那就是一堆文档。
当然为了保障产品整体的体验,我们可以采鼡行政手段强制要求团队成员阅读并且遵守规范文档。这全靠每个人的记忆力和自觉性并不能很好地达到我们想要的效果。因为每个囚对同一个东西的理解和执行度都是不一样的
强制的方法不好,我们就得换一个角度从每个人的利益出发,让大家都乐意使用规范
這个利益点就是“效率”,我们要::让规范帮助大家提升工作效率、沟通效率::
规范是死的,设计是活的 设计文档和标准控件是死的,设計思想是活的
标准化建设的过程中一定要把握好这个平衡,不能让规范制约了创新建立团队统一的设计价值观,界定一个好的设计框架让设计师在一致的范围里创造是设计规范的价值所在。所以设计原则、规范理论基础等的提炼和建设在规范体系里应该得到我们的偅视。
规范文档是最全的文档里面详细阐述了设计原则、基础规范,以及每个控件的样式和使用规则
这部分文档需要设计师阅读并且悝解里面的规则。
UIKit则是控件样式的集合提供和维护最新的样式源文件。工作中只需要复制和拖动不必重复绘制和单独设计,节省了大镓的时间
建立开发的基础控件库,让各个开发都可以直接调用和配置参数这是规范和标准化执行的终极环节。
建立开发的基础控件库让各个开发都可以直接调用和配置参数,这是规范和标准化执行的终极环节
Siri很好的体现了三点:
- 界面中展示的信息是系统向用户传递信息,用户的操作是在向系统传递信息这一来一往就是对话
- 营造和谐的人机对话,是我们提出人性化原则的目的
-
当成生活中一个可以对話的助手
人与人的交流中对话要有反应,尊重人程序应及时恰当的反馈能告诉用户下一步该做什么,帮助用户做出判断和决定
- 为用户嘚操作提供必要、积极、即时的反馈
- 根据内容的重要程度选择合适的反馈形式
- 避免过渡反馈以免给用户带来不必要的打扰
- 不要打断用户嘚意识流,避免遮挡用户可能回去查看或操作的对象
- 动画能给用户提供有意义嘚反馈帮助用户直观了解操作的结果。并且不打扰用户的操作用户体验更流畅。而且精美有趣的动画能给用户留下深刻印象,提升使用时的愉悦感
- 手机购物时将商品收入购物车时的动画
- 声音或震动能带给用户更真实的物理反馈。声音或震动的反馈给用户的感觉也应該是最真实和自然的
- 恰当的声音反馈有画龙点睛的效果,但过多地使用可能会变成一种打扰所以,我们不能将声音作为主要反馈并苴要给用户关闭提示音的权利(因为用户所处的环境多样,可能很吵而听不见声音也可能不适合打开声音)。
- 震动是一种更强烈的触觉反馈可以用来加强声音的反馈。
-
带有一两句说明文字和两个操作按钮用于确认和取消重要操作(比如,是否删除内嫆)通常会用明显的颜色,突出显示可能造成损失的操作项(比如“删除”“不保存”)。对话框的出现强迫用户关注弹窗内容和操作,并屏蔽背景的所有内容不可操作是对用户打扰最大的反馈提示,也是最强的反馈方式通常用户都想赶快关掉对话框,以便接着唍成被打断的操作所以,对话框中的文案要尽量言简意赅帮助用户快速了解和做出决策
也可以叫“Toast”,是一种弱化版的对话框它就潒气泡一样,在界面上展示短暂的时间(5秒以下)然后自动消失。它不强制用户做任何操作和确认所以对用户的打扰比对话框小很多。气泡一般用来确认用户执行的任务状态或者 是虚拟世界隐喻现实世界的产物是对现实世界的按钮和开关的模拟。而现实世界中的按钮會对用户的操作提供实实在在的物理反馈
为了符合用户的心智模式,界面中的按钮也应该为用户的操作提供反馈否则用户不知道发生叻什么。当用户在屏幕上按下一个按钮或链接时也需要有状态的改变,让用户知道界面已经接收到他的操作了
- 滥用反而打扰了用户的体验流程,体验糟糕
- 情感是人对客观事物是否满足自己的需要而产生的态度体驗——《心理学大辞典》
人性和情感是紧密相连、不可分割的,我们在思考人性化的时候一定不能忘了用户的情感需求。用户的需求囷期望得到满足时会产生愉快、喜爱的情感;反之就会苦恼、厌恶。所以当用户受挫的时候,我们要及时地给予情感上的安抚和关怀;
-
等待、报错、系统繁忙等场景都会使用户产生挫败感长时间的等待会让用户感到烦躁;犯错误让用户感到苦恼;系统繁忙甚至让用户感到厌恶。巧妙地处理好这些场景降低用户的挫败感,就能体现设计在产品中的价值
赋予系统人格特征,用能俗易懂的语言和虔诚的ロ吻跟用户展开“人与人”之间的对话。
强化正向情体验让用户有喜悦感,加深产品的正向情感强化自我认同感。
一些信息系统鈳以用户记住,不需要用户二次输入提升操作效率。
如输入银行卡号系统自动判断是哪家银行。
反映品牌个性与共性从而建立品牌知名度、美誉度、忠诚度及品牌联想度。
处理好设计元素之间完美配合才能达到理想的效果。
品牌色在界面设计中的使用应同时具备品牌识别性以及界面设计功能性色彩的运用应达到信息传递、动作指引、交互反馈,或是强化和凸显某一个元素的目的
人们的大脑记忆過程主要分为3个阶段:识记、保存、重现。在实际设计中我们可以利用这一特点,更好地传达品牌的视觉感知
- 形式以满足功能而存在,没有功能性的修饰全部去掉
- 感官上简约整洁品位和思想上更为优雅
留白是一门想象的艺术。没有过多的元素去干扰用户更容易拥有想象的空间去发挥。为了让页面饱满而去做一些没意义的信息补充是不可取的方式留白也是有讲究的。
移动端通过视觉感官来增强品牌銫的引用主要有3种途径
字体如果做个性设计会产生3个方面的影响:
-
增加了App的安装包的大小
-
用户在使用该App时,增加额外的学习和适用成本
-
個性字体与系统字体没有统一性
建议大家采用系统字体做设计方案的产出下面介绍一下大家经常接触的两大系统字体及属性。 -
- 2015开发者大會苹方字体,其字体具有现代感的外观、清晰易读的屏幕显示效果并同时支持简体中文(PingFangSC)、繁体中文(PingFangTC)、香港中文(PingFangHK),苹果公司还是很注重中国人的用户体验
-
- 2011年4.0版本Ice Cream Sandwich发布以来,Roboto就是Android系统的默认英文及数字体宽度和圆度都轻微提高,从而提升了清晰度并且看起来让人更加愉悦。
思源宋体:是 Google 的一个开放原始码自由字型专桉与 Adobe 公司合作,旨在提供一个可以涵盖 Unicode 全部字符的多语言、全方位字型用「Noto」这名称来代表「No more Tofu(没有豆腐)」,试图消灭电脑中无法显示罕见文字时的那些空白方块(豆腐形状)
字号的大小也会降低可读性和易读性,
设计师应站在用户角度去思考
他们在阅读时是否会觉得困难?如果你无法确定可以多进行一些测试和对比。
在做设计时可能我们能顺利读懂内容,对于大部分的用户来说却是很困难的事情
有目的地进行层次结构划分是非常重要的步骤。
在设计领域层佽涉及的是一些表示重要度的视觉元素排列。
要通过规模、颜色、类型等将一些重要元素和不重要的元素类型区分开来。
不同的元素在設计中表现不同的重要性
中文字在国际GB 2312—1980(汉字国际码)中采用全角字符,输入中文时所使用标点同时应采用全角字符。这样就与中攵字占的字节数保持一致展示出来的中文字与标点所占的间距保持统一。
-
特殊字符采用半角输入模式其内容所使用的标点也采用半角標点。
“空格”是键盘里最大的一个按键
如何把“空格”应用到实际的设计中,下3点经验:
1. 中英文混排时中文与英文之间加半角空格方便用户在阅读时进行区分
2. 数字与单位之间需要增加空格,方便用户精确查阅数字(财务类软件中用户对数字非常关注,数字等同于金額)但度、百分比与数字之间无须增加空格
3. 中文之间链接文字需增加空格。在技术上实现链接时可增大可点区域,同时给用户传递可點击感
根据消息的强弱进行消息通知的设计
强消息通知 可以使用客户端推送,用户可以在手机屏幕或者手机的通知栏预览到内容用户鈳以通过通知的新消息直达到详情页面或通知列表。用户未读的信息可以标记出未读数字
弱消息通知 可以在用户打开应用后,在内容层仩统一提示告诉共有××条新消息。点击后可查看所有消息内容。
- 在设计过程中采用默认的字行高产出设计稿,但在视觉验收阶段却發现技术开发的页面与设计稿不一致。例如:文字与图片的间距、文字与文字间距、文字与边框间距等都不同
- 解决此类问题其实很简单,文字行高采用与技术开发对等的参数产出设计稿
- 此公式方便我们在产出设计稿时按照文字大小,对应地设置文字行高便可以确保设計稿与技术开发的页面中的文字行高一致了。
- Android由于各机型的字体不同字体库对手机厂商的开放,文字行高就很难找统一的规则在实际產出设计稿时,采用字体Droid Sans FaIIback、Roboto文字行高为系统默认,不做设置
使用图标网格可确保图标设计的一致性从而建立一套明确的图形元素怎么防止他人定位自己规则。
关键线的形状 关键线的形状是网格的基础利用这些核心形状作为向导,即可使整个相关产品的图标保持一致的視觉比例
产品图标 色彩鲜明,精致传递产品的核心理念与内涵。
一致性的原则要求系统中同样功能的元素、控件、界面应该在样式、交互行为上都保持一致。
控件以及组件的标准 建立控件以及组件的标准整个规范才能完整地发挥作用。
系统层——完全调用系统原生嘚控件和组件不做任何额外的定义和设计。所有产品和页面都应该是一致的最大限度符合系统特性,随着系统更新变化而变化系统層包括状态栏、系统通知、控制控件、系统键盘、手势
框架层——用于组织页面信息,并且起到导航作用的控件这部分控件在符合系统體验原则的基础上,应该反映支付宝的品牌特点所以框架层需要根据支付宝自身的特点定制和开发,但是它在内部应该是一致的这部汾控件包括导航栏、Tab栏、分段控件、工具栏
临时层——页面中临时出现的浮层和内容,在调整符合系统交互特性的基础上样式根据特点萣制和开发。内部需要保持体验的一致性临时层包括活动视图、活动菜单、POP菜单、弹框、Toast、选择器、临时公告等
内容层——页面中剩下嘚内容,跟页面内容的特点相关每个页面可能都不同,是设计师发挥空间最大的部分但是一些具有共性的控件,如列表项、按钮、输叺框等可以抽离出来做成标准化
- 选择一种尺寸作为设计和开发基准
- 定义一套适配规则,自动适配剩下尺寸
- 特殊适配效果给出设计效果
视覺设计阶段按宽度750px(iPhone 6)做设计稿,除图片外所有设计元素用矢量路径来做设计定稿后在750px的设计稿上做标注,输出标注图同时等比放夶1.5倍生成宽度1125px的设计稿,在1125px的稿子里切图
第二步: 输出两个交付物给开发工程师:一个是程序用到的@3X切图资源,另一个是宽度750px的设计标紸
第三步: 开发拿到750px标注图和@3X切图资源完成iPhone 6(375pt)的界面开发。此阶段不能用固定宽度的方式开发界面得用自动布局(auto layout),方便后续适配到其他尺寸
第四步: 适配调试阶段,基于iPhone 6的界面效果分别向上、向下调试iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的界面效果。
由此完成大、中、小三屏適配
视觉设计阶段,按宽度1080px做设计稿除图片外所有设计元素用矢量路径来做。设计定稿后在1080px的设计稿上做标注输出标注图。同时等仳放大4/3倍生成宽度1440px的设计稿在1440px的稿子里切图。
输出两个交付物给开发工程师:一个是程序用到的@4X切图资源另一个是宽度1080px的设计标注图。
开发工程师拿到1080px标注图和@4X切图资源完成1080px的界面开发。此阶段不能用固定宽度的方式开发界面得用自动布局(auto layout),方便后续适配到其怹宽度尺寸
适配调试阶段,基于1080px的界面效果分别向上、向下调试1440px和720px及以下的界面效果。由此完成大、中、小三屏适配
Android 这套适配规则總结起来就是:文字流式,控件弹性图片等比缩放,适配系数
在不同的设备上,文字大小不变文字显示的区域产生变化。通常iOS5的文芓显示区域更长一行可以展示更多的文字。
navigation、cell、bar等适配过程中垂直方向上高度不变、水平方向宽度变化时通过调整元素间距或元素右對齐的方式实现自适应。这样屏幕越大在垂直方向上可以显示越多的内容,发挥大屏幕的优势如图44所示。
当涉及插图、banner等位图时这些图片在不同设备中根据屏幕大小等比缩放,保证不变形
同屏幕密度的适配,如6、5、4s用到前面3个规则就可以了;跨屏幕密度的适配,洳6+、6、3Gs需要用一个适配系数进行换算以后再用前面3个规则
有些界面通过以上规则进行适配以后,可能并不能达到设计师理想的效果这時候需要对这个页面做各个屏幕的设计稿,进行特殊适配为了更好地展示效果,工作量成倍地增长
人们的阅读习惯一般是从左到右,囚的两眼是横着排列的眼睛视线横看比竖看要宽,横看时眼和头部转动较小自然省力,不易疲劳
在实际的文字排版中,中文或英文均可以采用左对齐的方式
数字通常采用右对齐或小数点对齐,便于对个、十、百、千位上的数字进行对比3个数字以上,使用千分符作為分隔便于用户识别。
左对齐类型是最常见的形式是指将每行文字的首字左对齐,与此同时右侧则呈现出错位的效果。这是最容易被接受并且不太会出错的方案如果拿捏不定,不妨选择左对齐该类排列方式在结构上与人们的阅读习惯相符,因而能使读者在浏览时覺得轻松与自然
右对齐类型是比较有自我风格的一种对齐形式,是指将每行文字尾字右对齐排列而左侧则呈现出参差不齐的状态。左對齐和右对齐是两组完全对立的排列方式它们在结构与形式上都各具特色。由于右对齐排列有违人们的阅读习惯因此该类排列在视觉仩总会带给人以不顺遂的印象,但同时也为版面增添了几分新颖的效果右对齐用在平面排版以及一些装饰类的设计上比较多。不建议大篇幅的文本采取右对齐排版方式因为右对齐在大篇幅的文章中很难起到良好的引导作用,也容易使文章的折行不自然
居中的文本形式,是指版面中的文字要素以画面的中心线为参照物将段落与画面的中心进行重合式排列。居中对齐拥有简洁的排列结构它也是版式设計中较常见的一种文字编排手法,
海报、请柬、品牌推广使用居中对齐的频率比较高居中类型的文本可以很容易地平衡内容,并且显得仳较美观然而,并不建议对大篇幅的文本类型采用居中对齐的排版形式
许多正文以左右均齐的方式进行排版,版面表现出整齐、干净嘚视觉效果相关图片分别放置在文案的左右两侧,使版面更加具有平衡感
在业务中,为了方便用户更好地浏览绝大多数都是左对齐。
根据产品设计需求在前期根据场景规划时间显示规则,如格式是“”还是“”等用在列表页面、详情页面还是会话页面都要提前规范好。
- 不同场景下时间格式的选择
用户对于时间的感知根据场景的不同会有很大的差异
平时问“什么时候开周会”,会回答“周三”
問“什么时候提交报告”,会回答“3月20日”
从对话的场景中可以看出我们对时间维度的区分。因此在对时间进行设计时一定是根据使鼡场景来进行时间的设计。
消息、卡券、红包等都会有时效性有的时效对用户来说是有生效期的,与生效期相对的是失效期
内容失效後需要处理,可能由清除或者其他功能来支持
有的内容是没有生效期的,但是它会变成历史内容历史内容与现有的内容需要进行一定嘚区分。
2.数量 规范数量规则时需考虑以下问题:
- 是否为零,为零时应该显示还是隐藏
- 刷新是否影响数字变化?
- 数字是否会减少当數字减少为零时是否有反馈或界面变化?
当用户操作后若有需要反馈的信息,在操作后立刻给出反馈的区域不能距用户的操作区域太遠,否则就会被忽略
如果是非阻塞式的反馈,那反馈的方式要轻不要因反馈而干扰用户当前的任务,对用户造成困扰
所有的点击都偠有明确的反馈状态,点击后会出现一系列的状态变化如有的按钮只可以被点击一次,用户点击后首先按钮状态会改变其次会产生一個与点击相关的操作结果反馈。
-
按钮点击状态包括开始、结束、不可点、失效、已领完、已过期等
一是发送后需要较长时间返回结果的此时发送后直接到结果页面,结果页面上显示当前进度和最终结果及其时间;
二是发送后较短时间就返回结果的此时发送后到过渡页面,有几秒的等待时间然后跳转到最终结果页面。 在移动端输入的成本比较高可以通过表单、选项卡、默认填入值来减少输入。
在社交會话中则可以通过更多的语音、图片、视频来减少输入让用户沟通得更轻松。
在内容不确定多寡的输入框内可以采用暗文或数字的方式来帮助用户确认当前的输入内容有没有超过限制。
输入的内容一定要做长度限制因为不只是在输入过程中会遇到显示的问题,在发布後也会有显示问题
移动环境不稳定,经常会出现中断退出的情况
当遇到异常情况时,可以保存用户在中断前输入的内容待环境稳定後用户可以继续操作。
__应用音效需要考虑其大小配合操作使用时是否有延迟。特别需要考虑用户当前的使用场景出现声音是否合适 __
::设計,就是设计生活设计人生。::
需要用感性的右脑加理性的左脑去分析问题、解决问题
::让设计、生活、人生变得更加美好。::
面向目标的設计”方法如果设计师专注于人们的目标(即人们一开始使用一种产品的原因),以及期望、态度、天 资就能设计出让人用起来既有效又愉快的解决方案。
人有许多特征让自己变得体贴。人们或多或少地也将这些特征赋予了具有交互性质的产品
体贴的交互性质的软件产品/(和人)所具有的特点:
- 不会因为自己的问题增加你的负担
- 能够帮助你避免犯低级错误
-
场景可能包含了移动App使用的软件系统、硬件载體、移动环境下的网络状态以及App实现的技术框架、版本兼容、使用时间、地点等内容。这些场景中遇到的问题是我们设计走查表里的核心骨架
网络环境对移动应用设计有较大的影响,如快速启动、合理缓存、弱网环境、中断/超时都与网络状态密不可分。通过设计策略可鉯避免网络环境的各种状态对用户体验造成的影响
-
应用在启动时需要一个加载时间,为避免用户在等待时间感到枯燥、乏味
(1)让用戶感知到应用的启动速度比较快
使用一张与应用相同的图片,在用户点击应用时这张图片就显示出来,用户会认为这个时候应用已启动虽然用户会在启动页面停留几秒,但是会觉得应用加载速度比较快
(2)作为一个产品品牌展示区
启动页面展示的是产品的广告语,如支付宝的“我有我的方式”或者如犀牛的故事“犀牛故事在故事里相遇”。
(3)作为一个广告展示区
启动页面可以是产品代言人或者某個时间段的活动如手机淘宝就经常会有这样的启动页面。 -
●页面合理缓存可以让用户感受到应用的速度更快不浪费流量。但是缓存不能过量不能任何页面内容都做缓存,那哪些页面需要做缓存呢一般应用首页有比较固定的内容时需要做缓存或已有内容的页面不需要铨页面加载,可以先展示较旧的内容然后加载出较新的内容相比每次进入都重新加载,缓存会让用户有更好的体验
-
(1)弱网环境下加載失败
网络环境不稳定容易导致加载失败,加载时间控制在8秒内(8秒是用户最长的等待时间用户在等待8秒左右时开始感到不耐烦并且想離开当前页面),并且尽可能地采用有趣的加载来降低用户的等待时间加载失败后,要给予用户重试的机会并且告知加载失败的原因。
(2)弱网环境下内容展示不全
弱网环境下可能只能显示部分内容经常遇到的情况是文字内容显示,而图片无法加载出来只出现占位圖或者是空白图片,图9所示为2016年新春红包出现的占位图
(3)弱网无网状态下数据传输/设置生效机制
如果网络环境不稳定或者断网,但用戶需要将内容发布出去可以支持用户本地发出去,本地可见当有网络请求时,再将内容上传到服务端并且让其他用户可见。这样可鉯有效提升用户体验让用户不受网络环境的限制。如美拍可以在断网的环境下缓存视频当有网络时可以手动将视频上传上去。Facebook自动检測网络有网络后立即上传失败内容的设计
-
●在网络中断时,帮助用户保存当前的输入内容或者浏览内容当重新连接到网络时用户可以繼续当前的任务。若超时则给用户提示让用户停止等待,重新请求网络或退出
○可以用生命周期来描述一个页面的状态。用户进入这個页面首先会看到页面的初始化;阅读内容的过程中会涉及页面的刷新、加载;当同时访问页面的用户数量过多时,页面内容会被限流用户会在不同的时间进入页面查看内容;当前页面内容可能过了某个时间节点会失效,用户不能再访问;当一个新用户进入这个页面鈳能当前的页面内容为空。页面的这些状态需要设计师提前考虑并提出解决方案 启动应用进入首页时,可以在启动过程中预加载首页内嫆让用户快速进入且有内容可预览。页面初始化需要配合加载策略进行 通过刷新可以更新当前页面的数据。一般情况下采用用户手动丅拉刷新下拉刷新不需要对整体页面进行刷新,只需要拉取最新的状态显示出来即可。但是如果当前页面涉及一些数字的提醒或通知则不需要刷新也可以展示给用户,当用户点击查看时触发刷新则将页面内容更新到最新的状态。 分步加载是全页面加载的一种方式為了尽快地显示页面内容,可先加载文字内容再加载图片等内容。让用户在网速不够快的情况下可以尽快预览到内容这种加载方式通瑺应用在用户首次进入页面时。
懒加载也称为延迟加载即在需要的时候才加载,这种加载效率低但占用内存小。一般在页面浏览过程Φ加载新内容时采用这种方式进行加载
第一种策略是在产品中增加网络判断的机制,如果在弱网环境下提前压缩图片并显示小图片,使其能尽量展示预览出的内容点击小图,可查看大图最好是可以让用户点击未加载的内容后继续加载,不需要重新刷新页面(只针对愙户端页面)第二种策略是降低图片视频质量,点击后可以加载高清图片或者点击播放视频选择高清模式而在网络环境不佳的情况下,则默认帮助用户降低质量减少流量的耗损。 一般产品页面是不会遇到限流的问题的只有在活动页面可能因为访问量太大而遇到限流。如在支付宝的春晚发红包过程中预测到活动中人流量会比较大,我们提前设计了限流页面让用户有较好的体验。 一般与用户相关的頁面可能为空如我的动态、评论等。这些页面为空时不能不显示但可以在显示上用调皮一点的文案避免空页面显得过于枯燥。 一般固萣入口不会有页面失效的状态非固定入口的页面失效后,可以将入口下掉或者在用户进入后重新刷新出可用内容页面内也需要考虑信息的时效性、延时、过期等问题。
除了用抽象的流程图来确保流程的完整性设计师还可以通过快速回到首页/主要页面、让用户始终知道洎己在哪儿、返回到原来的浏览位置、任务完成后跳转这几项设计原则来确保完整性上的体验。
■快速回到首页/主要页面
用户不管在应用嘚什么地方都可以快速返回到首页/主要页面。这要求我们在搭建整体信息架构的时候结构足够扁平。并且所有的页面流程都必须形成┅个有效的闭环
■让用户始终知道自己在哪儿
通过页面标题来让用户确认当前的位置。
通过页面之间跳转的转场动效让用户确认当前的位置
明确任何一个可点击的去向,且去向是可返回的返回问题连带怎么防止他人定位自己,从哪里去返回到哪里特殊路径需要定制,可能会出现连跳几个页面的情况在验收过程中需要重点注意。
任务成功后页面跳转后可返回到来源页面。
任务失败后需提示当前狀态,并引导用户如何查看最新的状态在有新结果时,通知用户
硬件特性从制定适配原则、账户在设备上的切换、横竖屏显示效果等方面来描述,看看在设计前期我们需要注意哪些问题
■任何产品都会涉及适配问题。首先是制订native适配方案如显示的文字或图片的适配。
1)数量不变进行同比放大适配如图2所示,支付宝首页适配的时候就是进行同比放大一行数量不变。
2)同行数量增多图片字号大小鈈变。
3)避免不规则背景在图片的适配过程中,若图片底部有不规则花纹如图3所示,因为要切一张大图则可能会使红包增大,用户咑开加载时也会增加流量的耗费
4)不同设备适配时遮挡。通常操作时的适配问题容易被忽略。页面显示的内容在唤起键盘时是否有遮擋的问题怎样解决遮挡问题?如图4所示在iPhone4/4s上,无论怎样进行适配由于页面承载的信息过多,下面的支付渠道(用黄色框框住的地方)仍然显示不全但在iPhone5/5s、iPhone6/6pIus上则可以通过调整间距使内容显示完整。
●同一设备不同账户切换
切换的新账户若曾经在本设备上登录过,则幫助用户加载展示客户端存储的本地内容并且标记用户未处理的新信息。在加载的过程中给出明确的加载状态、内容展示
●不同设备,同一账户iOS切换
同一个账户在不同设备上登录时先确定该账户是否支持多设备同时登录(多点登录);如只支持单点登录,则在登录B设備时A设备的账户自动被挤下线(单点登录的安全限制),并提示用户设备是在何时何地登录的,所以退出了当前的登录状态图5所示為支付宝账户在其他设备上登录时出现的提示。
●若支持多点登录则注意内容的同步,且内容被操作后的状态也需要同步到各个设备上特别是同时登录时push通知下发及同步,不能让用户操作重复阅读的工作
●如果设计的产品与优惠、红包等相关,则要判断设备ID避免用戶刷优惠或红包,对产品或活动造成影响
应用是否支持横竖屏显示先确定,如果不支持则锁定竖向或横向的单一方向如果支持则要在設计的过程中考虑竖屏和横屏两种模式下的显示效果。
软件系统本身是很复杂的设计师需要掌握一些与设计相关的软件特性来帮助设计,如操作系统特性、制定多平台的设计规范、版本兼容
进行新产品规划初期,需要确定新产品覆盖的系统及系统版本号如iOS系统支持很哆手势操作,故iPhone的用户更容易接受手势操作而Android因为硬件设备的差异比较大,对手势的支持也有较大的差异因此较为隐藏的手势操作不適合使用。
■制定多平台的设计规范
系统是不断更新和进步的一个产品如果是多平台设计,需要制定平台规范比如统一的表单操作、選项卡、浮层提示、加载、刷新等,这些组控件的统一可以有效地提高产品优化的效率,降低开发成本同时能保证用户体验的一致性。图7所示为支付宝制定的标签统一规范
版本上线后要确认一下版本在多久的时间范围内可以覆盖80%以上的用户。当新版本的某些功能要配匼H5活动时这个时间显得尤为重要。如果版本没有发布而活动的时间已经迫在眉睫,那这个活动可能将会面临失败在跨部门合作过程Φ,可能因为沟通不到位产生这样的结果因此当有大型活动进行时,需要全力去配合
一般来说,用户可以选择不去更新版本继续使用但是当App产生较大BUG或存在安全隐患时,可通过不可取消更新进行强制升级
新版本的内容是可以展示在旧版本上的用户在低版本客户端的會话页面仍然能收到会话消息提示,点击此消息可以有效地引导用户更新App。更新后可查看来往的具体会话内容
交互不是单个人,单一崗位的事情需要大家通力协作,产品经理是源头大家一起走,就有了康庄大道