15条移动端实战UI-UE注意点

15条移动端实战UI-UE注意点
在做手机产品设计的过程中，遇到很多看似很小，且很容易被忽略的问题，正是这些小问题，一次次的撩拨用户的耐心，让用户对你的产品心生怨念。

刚出道的朋友没有经过实战，对细节注意不多，往往都会遇到类似的问题，强调多次后，觉得不如写下来，给新人共勉。

苹果有他们自己的字体，一般iOS用苹果黑
1、移动端产品原型设计中的像素规格
顶栏一般是20px，如果是iPhone4、iPhone5的话，因为屏幕分辨率的原因，数值要翻倍，是44px。

按钮的最小值是44*44px，同样的，在iPhone4以上的设备里面要翻倍。

在android 里面也是差不多的，一般要求是44*44以上，不过iOS要求会严格一些。

具体的细节可以下载一个官方的iOS和android的UI设计规范。

2：、dp、dip、dpi、sp 等到底有什么联系区别？产生的根源和设计时的影响如何？是否屏幕密度的决定原因？
UI设计师的角度理解：
px（像素）是我们UI设计师在PS里使用的（不解释），同时也是手机屏幕上所显示的（也不解释）dp是开发写layout的时候使用的尺寸单位，sp是开发写layout时关于字体的字号单位，且dp与sp 总为1：1关系。

Android支持四种不同的dpi模式：ldpi mdpi hdpi xhdpi
一般地，手机分辨率与所运行的dpi模式是匹配的，例如hvga(320x480像素)的手机屏幕一般在3.5英寸左右，运行在mdpi模式下（也有例外，稍后解释）（这个是ROM控制的，app 不能改变）。

当运行在mdpi下时，1dp=1px：也就是说设计师在PS里定义一个item高48px，开发就会定义该item高48dp；Photoshop中14px 大的字体，开发会定义为14sp。

对于一部wvga（480x800）手机（G7、N1、NS），一般是运行在hdpi模式下。

当运行在hdpi 模式下时，1dp=1.5px：也就是说设计师在PS里定义一个item高72px，开发就会定义该item 高48dp；
Photoshop中21px大的字体，开发会定义为14sp。

所以，当你的app需要适配多个dpi模式的时候（例如同时适配mdpi与hdpi），若你在wvga 下做设计，你需要将你的各数值都为3的倍数，并在切图标注时将所有的数字除以3乘以2换算成dp，这样开发的同一套layout就能用在两个不同的dpi模式下，而不是写两套layout。

mdpi与hdpi是2：3的关系
mdpi与xhdpi是1：2的关系
ldpi与mdpi是3：4的关系
Galaxy Nexus 是720P屏幕，就是运行在xhdpi下的。

可以想见为什么iOS的开发者升级到Retina Display 是多么的无痛
再补充一种例外，有些比较山寨的Pad有可能是7英寸屏幕，分辨率为wvga（480x800）运
行在mdpi下，所以一部wvga手机是320x533dp，一部wvga 平板是480x800dp，可以显示的内容会多很多。

1、没有不可点击的效果
一般按钮会有四态，不可点击效果、可点击效果、聚焦状态、按下状态。

如果你的按钮此时处于不可用状态，那么一定要灰掉，或者拿掉按钮，否则会给用户误导。

2、菜单层次太深
菜单项以5~7个为宜，如果有二级菜单，就要注意合理的菜单分类，不能有太多层级的菜单，否则很难预期，也很难找到，寻找和返回都会变得很麻烦。

3、文字长度不加以限制
手机界面很小，寸土寸金，一页只能显示下6~10个列表，一行只能显示下10~16个字，标题栏的字数以5个以内为宜，标签栏也以2~3个为宜，那么这时候出现文字过长的情况，一定要定义一下处理方式，如果是选择型的，一般是截断或者打点缩略;如果是内容阅读型的，可以折行。

但最合理的方式还是精简文字内容，缩短文字长度。

4、文字表意不明
由于手机是碎片时间、片段式阅读，所以手机界面上的文字表意性要求的更高，更苛刻，一定要在用户瞟到的瞬间，准确的传达信息。

除了表意清晰之外，还要求语言精简，避免啰嗦;使用用户的语言而不是程序的语言;产品文案体现产品性格。

5、交互流程分支太多
做交互的时候一定要有一个任务流程的概念贯穿始终，用户是为了完成某个任务而使用软件的，交互设计师除了关注界面元素、跳转逻辑和交互反馈之外，还要关注用户任务，分得清主要任务和次要人物，给主要任务一个畅通无阻的清晰流程，不要给予太多可能的分支，干扰主要流程。

6、相关的选项离的很远
相关选项一定要具有操作上的延续性，虽然手机屏幕看起来比电脑屏幕要小的多，但是手机在屏幕上移动的代价，却要比鼠标在电脑上移动的代价大的多，如果手机上相关选选离得很远的话，用户一是容易迷失，找不到下一步操作，二是需要移动手指，到屏幕另一端触发操作。

7、一次载入太多的数据
流量、电量、速度和稳定性是手机产品的四个硬指标，如果你的应用不能合理的帮助用户节约流量、电量，提升浏览速度和浏览体验，保证应用的稳定性能，就不要谈什么用户体验。

你可以利用预加载缓存、批量载入、动态刷新、服务端数据压缩等方式来保证省、快、稳基础体验。

8、按钮可点击范围比看起来小
我们都知道移动端有个神奇的数字“44”，根据食指最小点触距离7mm、拇指最小点触距离
9mm，可以推导出做设计的时候，最小的点触距离是44*32 px。

你可以设计一个精美的小图标，但是在定义它的点触大小的时候，却可以做放大处理，但你千万不要设计一个傻大的图标，点触范围却比图标要小，这样会给用户带来明显的误操作挫败感。

9、标签页跟内容没有从属关系
标签页跟内容需要有很好的联动关系，一般一个界面内有二级标签就足够复杂了，千万不要再有三级标签、四级标签。

每个标签页都有自己特有的内容，当切换标签的时候，内容跟着切换。

标签页如果是点击切换，内容部分可以整体刷新，标签页如果是滑动切换，内容页也要跟着滑动切换，千万不要一个点、一个滑。

10、把所有的操作都暴露出来
手机产品交互设计要经历缩减、隐藏、附加、组织的过程，千万不要妄图把什么功能、什么操作都暴露出来，以彰显强大。

你需要把自己应用的所有功能所有操作做个优先级设定，那些常用的20%的功能，放在界面的主要位置上，其他80%的操作，放在次要位置或合理归类组织后，隐藏起来就可以了。

11、没有空数据界面设计
我们在做设计的时候，往往是提供理想化的场景，用户都已经进来了，我们怎么玩。

但是，往往应用刚推出的时候，是没有用户的，甚至当应用有了一定用户基础的时候，新进来的用户打开应用的时候，应用仍然可能是一种没有数据的状态，再或者当用户清楚了全部数据，这三种情况下，用户都可能遇到空数据的界面。

新手设计师往往不加设计，这时候用户就会看到一个空白界面，茫然失措。

有经验的做法就是，提供一个情感化的界面，告诉用户当前没有内容;更具引导性的做法，就是引导用户去执行操作。

12、用户引导的滥用
去年就预言用户引导将要泛滥，很明显设计部门都喜欢用漂亮的引导界面告诉用户新增的功能或隐藏的应用，但不是所有的应用、所有的功能都需要花哨的引导的。

如果是通用的功能、非重点的模块，根本就不需要引导;如果是功能告知，只需呀轻量级的引导;如果是版本更新说明，说明书式的引导可以采用，但是要言简意赅。

13、无加载中状态
手机产品只要是需要联网，需要交换数据，都需要提供一个加载中状态的，无论是菊花转还是Toast还是对话框，你需要给开发人员一
个全局的定义，并且要告知加载中是模态(前台加载)的还是非模态的(后台加载)。

且要考虑到加载时间过长、网络开关没有打开、网络不通等情况分别怎么去处理。

14、未定义Back的逻辑
在为Android做设计的时候，会涉及到硬件交互，其中Back键的使用，是一门学问，Android 官方有一些指导原则可以借鉴，但是具体开发的时候，还是会有很多特殊情况，
比如单一实例的替换、键盘及一些中间状态，这种情况下，Back 可能需要被定义一下，该回到前一个实例(那就需要变成多实例了)还是该回到初始状态(清空输入内容或恢复初始状态)。

15、无横屏模式的设计
由于横屏模式下，纵向空间变得格外宝贵，导航栏、标签栏、键盘都需要被压扁，横盘模式一定要考虑是简单拉伸适配还是重新设计，如果你的应用不适合在横屏模式下使用，就屏蔽横盘，如果你的应用包括应用widget都需要支持横盘模式(甚至是带侧滑键盘的横屏机器)，就需要提供设计方案。

如果是S60V5这种竖高的机器，甚至需要重新设计。

作为手机产品交互设计师，利用设计规避问题，提升产品用户体验，把体验转化成价值，是我们所追求的境界。

手机产品设计禁忌，是笔者遇到的一些设计问题，欢迎各路高手协同补充遇到的问题，共同避免重复发明轮子。