导图社区 APP移动端UI设计规范设计原则总结
APP移动端UI设计规范设计原则总结,包括内容优先、为触摸而生、转换输入方式、明确的反馈、为中断而设计、为用户的误操作而设计、一致性等内容。
编辑于2022-11-04 13:39:49 广东APP移动端UI设计规范设计原则总结
一、内容优先
手机屏幕空间资源珍贵
布局以内容为核心
提供符合用户心里预期的内容
适时的隐藏一些干扰功能,让内容最大化
删除不必要的内容,只抓重点, 是对移动设计师德基本要求
二、为触摸而生
基于手指的手势操作已经代替了鼠标的点击操作
手势操作灵活多变,交互自然
识别性差,操作精度不高
针对触摸屏的特点设计
1、以信息架构为基础,建立手势交互规范
2、优先设计自然的手势交互,而不只是点击
3、引导用户在情境中学习手势操作
4、可出区域必须大于7*7mm,尽量大于9*9mm。
在界面中的可触物理区域不应该小于7*9mm
三、转换输入方式
文字输入是移动端的软肋之一
操作效率都相对较低
在行走或单手操作时,输入的出错率也较高
尽量避免文字输入, 或者使用一些代替方案来提升输入效率。
1、减少文本输入,保留之前输入的内容
意外退出后能再返回(实时保存信息)
通过关键字联想(预测用户要输入的内容,供用户选择)
2、转化输入方式,可以通过将常用的输入框转化为选择控件, 或其他自定义控件
如:日期、城市、地址等
如:商品的尺码、颜色、种类等
如:充值的面值、时长等
根据实际用途转化为可选项目
3、使用手机已有的传感器输入
语音识别
扫码识别
二维码
条形码
文字、图片等
四、明确的反馈
移动产品需要 面对各种情景
屏幕小
硬件性能差
网络不稳定等等
有效、清晰、及时的反馈起着重要作用
1、为用户的行为操作提供提供及时的反馈。
如点击列表后背景会变灰色,这样在网络缓慢或性能较差的设备上, 用户能快速察觉到已经点击成功,从而避免多次点击
2、提供有价值的状态提示反馈。
避免使用模态窗口,打断用户的当前任务
可以考虑toast、状态栏、导航栏等反馈方式
也可以考虑结合声音、震动、闪光灯等组合方式,让反馈信息更有效
五、为中断而设计
1、保存用户的操作,减少重复劳动
网络终端状态:
在移动应用上行服务数据时,都需要考虑网络状态出现异常的状况
例如新浪微博客户端,当博文发送不成功时会暂存到草稿箱中;iphone发送消息不成功,也会保存内容,标记为发送失败,允许用户重新发送。
编辑中断:
在编辑内容的界面中,要考虑在各种中断事件后,保存已编辑的内容,减少用户的重复操作。
2、衔接记忆而不是重头开始
当用户在阅读是被打断
书籍类的阅读
再次进入界面后,衔接上一次正在阅读的页面而不是书本的首页
新闻阅读类的阅读
根据时间间隔来判断
超过一天时间没有阅读,再次进入后,可以让用户选择是否继续阅读或返回首页最新内容
若时间间隔很短,则直接返回之前的页面内容继续阅读
六、为用户的误操作而设计
1、在设计产品时,通过页面的设计、重组或特别安排,尽量的防治用户出错
好过错误提示影响用户体验
2、为了避免用户的误用和误击,应该为用户提供撤销和重做的功能
3、当用户操作有误需要错误信息提醒时,错误信息应该用语言表达,要较准确地反应问题所在,并且为用户提出一个建设性的解决方案。
七、一致性
1、设计上的一致性:
基本结构布局
模块化内容
文案
交互行为
视觉风格
……
2、于平台环境一致
保持与平台的一致性,避免用户在使用上的不习惯
除非产品的特殊设计需要,否则尽量不改变这样的设计
3、跨平台的一致性:
移动产品往往是多平台布局,包括ios、android和web app,内容设计上的处理要追求一致性
设计规范
1、 APP设计尺寸单位各自的定义:
pt: point——【 点】印刷行业常用单位,等于1/72英寸
dpi: dot per inch——【每英寸多少点】,该值越高,则图片越细腻
px:pixel——【 像素】 电子屏幕上组成一幅图画或照片的最基本单元
ppi: pixel per inch——【每英寸像素数】 该值越高,则屏幕越细腻
dp: dip,Density-independent pixel, 【安卓开发用的长度单位】
1dp表示在屏幕像素点密度为160ppi时1px长度
sp: scale-independent pixel——【安卓开发用的字体大小单位】
安卓开发尺寸
1dp定义为屏幕密度值为160ppi时的1px,即,在mdpi时,1dp = 1px。
以mdpi为标准,这些屏幕的密度值比为:
ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3;
在xhdpi的密度下,1dp=2px;在hdpi情况下,1dp=1.5px。其他类推。
目前最常见的安卓设计稿为720*1280的或者是1920*1080px的
设计 Android 应用的最佳实践:
1. 画布大小定位 720 x 1280,72 dpi
2. 只使用偶数单位的尺寸
比如 96 px 的列表项高度,16 px 的边距,64 px 的图标边长
3. 只使用 24 pt,28 pt,36 pt 和 44 pt 的字体
4. 设计完成以后,所有尺寸的 px 值除以 2 作为 dp 数值交给工程师
5. 所有字体的 pt 值除以 2 作为 sp 数值交给工程师
6. 所有切图变成三份,分别是原始大小、缩小 1.5 倍,放大1.5 倍,分别作为 xhdpi,hdpi,xxhdpi的资源交给安卓工程师。
2、 手机APP设计
通常按720×1280px(2倍)设计
3、 平板电脑端
一、iPad用户体验设计指导性原则
1、在iPad上侧重的是内容和交互,而不是UI。
为了让用户关注内容本身并在交互的过程中尽量少受干扰
我们需要淡化程序UI,弱化界面控件、让信息更扁平化
(让上下层级可以在同一界面中自如切换)
限制一个视图内的任务复杂度、淡化文件管理、使用最少的模态对话框
只有在需要时才提醒用户
2、是内容形式上富有真实感
程序显示和现实生活越相似,用户就越容易理解、操作并喜欢
iPad上自带的iBooks、Note以及Google Map都是很好的例子
可以使用动画进一步增强真实感觉,动作的真实感比外观更为重要,要符合物理规律
3、是充分利用设备性能和特性
重力和加速度感应、多点触控、手势识别等人机交互新特性
二、iPad界面设计尺寸规范
iPad6/iPad Air2
iPad5/iPad Air/ipad mini 2
iPad4/ipad mini
iPad3/the new iPad
iPad2
iPad1
iPad Mini
2048 × 1536
2048 × 1536
2048 × 1536
2048 × 1536
1024 × 768
1024 × 768
1024 × 768
40px
40px
40px
40px
20px
20px
20px
88px
88px
88px
88px
44px
44px
44px
98px
98px
98px
98px
49px
49px
49px
小米平板7.9英寸
屏幕分辨率:2048×1536
4、IPHONE
APP产品经理、APP设计师 如何去阅读和选择书籍
选择书籍的三个类型
1、短时间内想获得的能力
觉得的自己的同理心,沟通有问题时
《人性的弱点》
《人性的优点》
《社会心理学》
《说话就是生产力》
刚进入电商产品这个行业,对电商业务不熟悉时,会选择读电商方面的书
《我看电商》
《再看电商》
《走出电商困局》
策划的营销活动效果不好,会读
疯传》、《上瘾》
2、长时间想获得的能力
想获得好的逻辑思维能力
《金字塔原理》
《思考的艺术》
想获得心智的成长读
《品格之路》
《社会性动物》
读书方法论
1、搞明白作者在说啥
读书前先把自己放空,只有空杯心态,全然的融入作者的问题及其推理过程,才能吸收作者准备的思想盛宴
检验自己是否真正搞明白作者表达的观点,最好的方法是举一反三
把作者介绍的现象,观点以及分析工具,用来分析其他现象,看看是否能够自圆其说。
2、作者是如何解决问题的
只有了解作者是如何解决问题,知其所以然,对于别人的观点言论,才能用自己的思维去思考,用自己的语言去讨论,不只是堆砌观点
客观检验标准是
自己能否给别人讲清楚
教会别人是最好的学习,只有自己搞明白作者解决问题的过程,自己才能够分享给别人,并在分享的过程中不断的把作者的心得和自己原有的知识体系进行融合。
知到极处便是行,行到极处便是知
如果我们对自己认知深信不疑,那我们的行为一定会体现出来,所有的事情都是理所当然的,不会陷入两难选择中.
3、作者是如何想到这个问题的
为道日损,抽象出其共性,看到事物背后的本质
通过不断思考推理提炼抽象,知识从工具变成了思想和洞察力
客观检验标准是
自己是不是能随时察觉并解释身边的变化以及反常之处
4、作者的结论不适用的情况
科学结论都有前提假设,每次科学的进步也是因为推翻了一种前提假设或者取消了一些前提假设
客观检验标准是
自己是否能够在看到客观世界的之后,还能找到理论和现实世界的误差。只有察觉这些误差,才能做出更贴近现实的决策。
知道了某个理论哪里能应用,哪里不能应用,才能应用理论解决实际问题
【李叫兽】为什么你看了很多书,却依然没有洞见
1,建立知识之间的联系
我在看书的时候,每看到一个有用的知识,都停下来去寻找联系——看看有什么其他的现象能够被这个理论解释。
“人的爬行脑(控制人的欲望的那部分大脑)更加喜欢视觉化的信息,而不是抽象的信息。”
iPod的文案“把1000首歌放到口袋里”
比“小体积大容量的mp3”要好的多
众多的谚语也是流传多年、朗朗上口啊,那么它们是不是“视觉化”的呢?
“同时实现多个目标”
“拿在手里的机会才是最重要的”
“敌人现在很害怕”
“不要第一个出风头”
“早点行动更加有机会”
“一石二鸟”
“双鸟在林,不如一鸟在手”
“敌人如惊弓之鸟”
“枪打出头鸟”
“早起的鸟有虫吃”
自然是谣言了,实际上,谣言也是视觉化的信息:
“wifi会杀精”
而不是说更加抽象的“wifi对健康不好”
古人对抽象现象的解释也是视觉化的
为了解释成雨的原因
塑造了雷公电母和龙王
甚至很多伟大的演讲也是视觉化的。比如马丁路德金说:
“我们追求人人生而平等,我们要减少种族歧视!”
“我梦想有一天,在佐治亚的红山上,昔日奴隶的儿子 将能够和昔日奴隶主的儿子坐在一起,共叙兄弟情谊。”
之所以这样,是因为真正导致人与人之间知识水平差异的,往往并不是知识数量,而是知识之间的联系。
2,构思知识的多种用法
2.1 当我接触了一个新知识的时候,思考
过去的哪些现象可以被这个知识解释?
我的哪些行为可以被这个知识所改进?
2.2 当你学习了一个新的知识,一定要提前构思一下
这个知识会如何改变我的行为?
将来我可能会怎么用它?
因为很多人的问题并不是缺乏知识,而是到了某个时刻想不起来应该用什么知识。
提前的设想(将来我可能会用这个知识来解决什么问题)
就可以让你形成一种“自动触发”,到了某个问题,就可以立马想到相应的知识。
3、尝试去探索事物背后的原因