android产品设计

Ⅰ Android与iOS：两种设计语言的和而不同

整体风格对比

IOS： iOS7的Flat Design——是 Mobile 设计里程碑。原本栩栩如生的拟物化设计被拍扁，去除了冗余、厚重和繁杂的装饰效果，变成了“扁平化设计”，其核心思想就是让“信息”本身凸显出来，在设计元素上则强调了抽象、极简和符号化。自此扁平风格开始在移动端设计中广为盛行。

Android： 自从2014年11月3日，Android5.0 Lollipop 正式面向用户推出，Material Design 焕然一新的设计惊艳了全场，不仅仅是视觉效果，全新的“数字纸墨”的空间概念也赋予了界面全新的UI理念。

那么 Flat Design 与 Material Design，两个同样趋于简约的设计理念，他们具体的区别又在哪呢？ 以下将会就这个话题具体分析两者在设计思路、动效和其他细节上的不同。

设计思路的不同——开发与封闭

如果只能用一对词来概括 Android 和 iOS 系统的不同，那应该是开放与封闭，也正是这两个截然不同的系统特性带来了设计思路的不同。

Android 的开放带来了多样化设计的同时（使用自定义控件几乎没有不能实现的设计效果），同时也带来了“杂乱无章”之感和众多因为不统一而造成的用户在使用时无从下手的情况。

iOS的 HIG（《Human Interface Guideline》人机交互规范）则更多“迫使”设计师去更多的使用系统原生的控件，设计师对于控件的修改非常局限，但这样做的好处就是每个 App

的基本操作都是在规范之内，具有一定的统一性，用户使用起来非常的方便，学习成本也相应降低了不少。这两者很难去评判孰优孰劣，可以说“iOS 的下限比 Android 高，但 Android 的上限比 iOS 高”，伴随着大屏时代的脚步，可以看到双方都在努力靠近彼此的一个趋势，相信在不久的将来，就可以达到一种“和而不同”的平衡。

动效展现原理不同——换个角度理解世界

现在动效的运用已经成为了许多 APP的标配，合理的动效不仅仅是为了视觉效果上的“酷炫”，更是帮助用户更好的理解层级、转场关系和关注到重点信息的利器。然而细心的设计师会发现，Android

和 iOS 的动效思路是截然不同的。用一句话概括两边设计语言的物理模型就是： Material Design 运用的是机械物理和电磁物理，而iOS 的动效更多建立在镜头运动和景深变化上。究其设计语言的本质就是让用户可以把客观经验移植到界面的一种思路。

Material Design 的隐喻是纸张，用户的手指就像磁铁一样把电子纸墨吸引过来，点击后就会泛起“涟漪”作为一个交互响应。而其他物体的排列则按照一种“深浅”的层级来排布，离手指越近的元素越亮，阴影越深，而离开远的元素则越暗，直至淹没在黑暗之中。

细观 iOS 的系统动效可以槐桐厅发现，iOS 的桌面就好像一片星空，每个 App 都是其中的一个小星星（点），每当用户去点击，镜头就会切近，而背景则是隐入了一片高斯模糊的景深之中，这应该是每个 iOS 用户最深刻的动铅隐效体验之一了。 高斯模糊也成为了 iOS 特有的一个表达层级关系的利器 （其中不仅是模糊，还存在着镜头晃动时的位移）。

同样类型的动效还体现在打开 APP 的时候由一个点放大成一个面，包括“轮虚日历”App 和“相册”App（皆为系统应用）中年-日-月切换的操作，均是镜头思路的表现形式。

无论是哪种动效，本质上都是帮助用户更好的理解界面信息在时间和空间上的关系。

其他设计形式——和而不同

（1）Tab bar的设计

iOS的Tab放在页面底部，通常通过点击来切换。Android一般放在页面顶端，可以通过滑动页面来切换Tab，当然Tab可以点击切换。Tab多的话，Tab本身也可以滑动。

单条item的操作

iOS单条item的操作有两种，点击和滑动，点击一般进入新的页面，滑动会出现对这条item的一些常用编辑操作，如微信里滑动一条订阅号，会出现取消关注和删除。

Android中，单条item的操作也有两种，点击和长按，点击一般进入新的页面。长按进入一个编辑模式，可以在里面进行批量和其他一个操作，比如删除，顶置等等。

字体

iPhone上的字体英文为：HelveticaNeue 。iOS9之后变为 苹方字体 ，该字体提供了6种字重。分别为：常规体、极细体、细体、纤细体、中黑体、中粗体。使用不同字重，更加界面上不同层级信息的表达。

Android 上的字体为：Droid sans fallback，是谷歌自己的字体，与微软雅黑很像。

规范与用户习惯的平衡

最后谈一谈微信，这个用户量级重达10亿的APP，他们是如何在Android和iOS的设计版本中平衡规范与用户习惯的。

微信的tab导航，iOS和Android端依然是保持一致，都放在底部的。其实在Android4.0时期，微信出过一个严格按照android规范的版本，把导航放在里侧滑里，但是随着用户使用习惯的逐渐被固化，发现很多常用的功能是不适合放在侧滑里的。所以后来的微信android版，还是把主导航放在了底部。只是在单条item的操作、输入框的样式等细节上按照android的规范来做。

总结

做设计，既要借鉴官方、行业主流的设计形式，更要分析和总结别人设计形式背后的逻辑。官方、主流设计已经将用户的认知和使用习惯培养起来了。

正如交互之父Alan  Cooper所说：如果你找不到更好的设计方案，就按照目前的标准来做，强打差异化有违用户习惯的，可能这对用户价值是有伤害的。 这就是最后要用微信为载体对比iOS和Android两大系统的差异。设计的目的在于提供适当场景的解决方案，当目前市场的解决方案都满足不了现有的业务需求，我们就要学会创造，但是在创造过程中最好依据现有标准设计来改变与创造。

Ⅱ Android 平台设计规范有哪些

1、尺寸以及分辨率：

Android的界面尺寸比较流行的有：480*800、720*1280、1080*1920，我们在做设计图的 时候建议是以 480*800的尺寸为标准；

2、界面基本组成元素：

界面基本组成元素包括：状态栏+导航栏+主菜单栏+内容区域；以480*800的尺寸为标准下的 各个元素的高度(其实导航栏和菜单栏每一个应用都或许不一样，android对于尺寸没有太明确的 数据规范)如下：

3、字体：

Android 系统中，Droid Sans 是默认字体，与微软雅黑很像；

4、操作栏：

1、”操作栏”对于 Android 应用来说是最重要的设计元素，它通常在应用运行的所有时间都呆 在屏幕顶部；

2、 操作栏的基本布局：

1向上＋2 Spinner视图控制＋3 重要操作按钮＋4 更多操作：其中，向上按钮，点击后是去到 当前界面的上一个层级，非第一层级界面有此按钮，第一层级界面则无向上按钮；Spinner 是 用于展示内容的下拉菜单，其内容包括视图的快速切换和显示相关内容的完整信息；更多操作 （action overflow）是集合操作栏中不常用的和非重要操作的地方。

5、多面板布局：

多面板布局更多的是针对平板电脑，把手机端的目录视图和详情视图两个层级的界面，甚至更 多的页面，复合展示在同一个界面中，有效地利用平板电脑的屏幕空间，扁平化层级结构，简 化导航。这点在iPad上已经运用得相当娴熟了。

6、选择：

Android4.0中的长按与Android2.3及更早期的版本有很大的不同。早期版本长按操作后，是 出现情境菜单的浮出层。在Android4.0中，长按后在操作栏的位置会覆盖一个临时的情境操 作栏，不再弹出情境菜单浮出层。在临时情境操作栏的环境下，当前界面的内容项允许被单个 处理，也允许被批量处理。

7、返回和向上：

返回按键用在手机全局的虚拟导航栏中，基于用户最近查看的界面历史，采用时间倒序的方式， 连接界面间的关系。向上按钮用在操作栏的左侧，基于层级结构，点击后是去到当前界面的上一 个层级，若当前界面已经是最高一级，则没有向上按钮。

8、主题样式：

推出三套默认主题：Holo浅色主题、Holo深色主题、Holo浅色底+深色操作栏主题。主推app在 这三套默认主题的基础上做设计，以加快app研发效率，但只是建议使用，并没有完全强制。

9、触摸与反馈：

用户触摸应用中的可操作区域，应当在视觉上有响应，微小的反馈会给用户带来很好地效果；

10、按钮：

1、按钮的3种表现形式如下图：

2、对于仅包括图标的按钮，不需要使用背景色；

11、滑块：

滑块的几种表现形式如下图：

12、进度条：

如果某个操作需要花费很长的时间，就需要用进度条的指示和旋转圈的形式来表示：

1、如果你可以知道当前任务完成的比例，那么使用进度条，让用户了解大约还需要多久才能完成；

2、当使用旋转圆圈时，不要配以文字标签。旋转的圆圈已经表明了正在进行后台操作。

13、开关：

用户通过开关作出选择，包括3种形式：复选框+单选按钮+开关；

1、复选框：用户可以在一个集合中作出多个选择：

2、单选按钮：单选按钮允许用户在一个集合中做一次选择；

3、开关：开关控制单个选项的状态；

14、对话框：

应用通过对话框让用户作出决定或者填写一些信息，

1、对话框的左边一般情况下是取消按钮，右边是确定按钮；

Ⅲ Android 5.0 Lollipop甯︽潵鍝浜涘墠镓链链夌殑璁捐″拰镐ц兘鎻愬崌锛

Android 5.0 Lollipop锛氩彶涓婃渶澶у彉闱╃殑鍗佸ぇ浜镣

璋锋瓕镄𪞝ndroid绯荤粺鍦ㄤ笉鍒颁竴骞寸殑闂撮殧钖庯纴浠嶬itKat璺ㄨ秺鍒颁简Lollipop锛屼袱娆＄硸闇滃懡钖嶅桨鏄惧叾钀ラ攒绛栫暐銆侺ollipop镄勫嚭鐜版棤鐤戞槸Android铡嗗彶涓婃渶澶х殑闱╂柊鍗囩骇銆备互涓嬫槸鍏朵腑鍗佷釜鍏抽敭鐗规э细

1. Material Design椋庢牸镄勬墎骞冲寲鐣岄溃

鏂拌捐¤瑷褰诲簳姝ュ叆镓佸钩鍖栨椂浠ｏ纴鍊熼壌鍗板埛璁捐″厓绱狅纴镞ㄥ湪鎻愪緵绾稿紶鑸镄勮Е镒熶綋楠屻傚疄浣挞殣锽荤悊蹇佃祴浜堢晫闱㈠疄浣撹〃闱涓庤竟缂樼殑璐ㄦ劅锛屾彁鍗囩敤鎴风悊瑙ｅ拰璁ょ煡銆傚姩镐佹晥鏋滃垯澧炲己浜嗘暣浣撹繛缁镐т綋楠屻

2. 璁惧囧吋瀹规ф墿灞

Android Lollipop璺ㄨ秺璁惧囩晫闄愶纴鏀鎸佷粠鏅鸿兘镓嬫満鍒版櫤鑳界数瑙嗐佹苯杞︾瓑澶氱被璁惧囷纴涓庡井杞镄刉indows 10璺ㄥ钩鍙扮瓥鐣ョ浉锻煎簲銆

3. 鐜颁唬鍖栫殑阃氱煡涓蹇

鏂扮殑阃氱煡涓蹇冧紭鍖栦简淇℃伅锻堢幇锛岀獊鍑洪吨瑕佷簨椤癸纴鎻愪緵阌佸睆镆ョ湅鍜屽嵆镞跺洖澶嶅姛鑳斤纴鎻愬崌浜嗙敤鎴蜂氦浜掍綋楠屻

4. ART铏氭嫙链虹殑镐ц兘椋炶穬

ART铏氭嫙链虹殑寮曞叆锛屽疄鐜拌法骞冲彴缂栬疟锛屽ぇ骞呮彁楂桦唴瀛桦崰鐢ㄥ拰搴旂敤绋嫔簭锷犺浇阃熷害锛屾敮鎸64浣嶏纴棰勭ず镌镟村ぇ鍐呭瓨瀹归噺镄勬湭𨱒ャ

5. Project Volta鐢垫睁绠＄悊鏀硅繘

Volta璁″垝甯锷╁紑鍙戣呬紭鍖栫数姹犱娇鐢锛屾彁渚汢attery Historian鍜孞ob Scheler API锛屼互鍙夿attery Saver妯″纺锛屽欢闀胯惧囩画鑸銆

6. 链鏂板簲鐢ㄧ▼搴忕晫闱

鍊熼壌Chrome娴忚埚櫒镄勬爣绛惧纺璁捐★纴绗涓夋柟寮鍙戣呮湁链轰细镓╁𪾢搴旂敤锷熻兘锛屾彁渚涙柊棰栦綋楠屻

7. 瀹夊叏镐х殑澧炲己

鍖呮嫭钃濈堕璁惧囱瘑鍒瑙ｉ挛鍜岀郴缁熸暟鎹锷犲瘑锛屼娇寰楁伓镒忚蒋浠舵洿闅句互渚靛叆锛屼缭闅灭敤鎴蜂俊鎭瀹夊叏銆

8. 鏁版嵁镫绔嫔瓨鍌

璁惧囨暟鎹镫绔嬩笖链夎抗鍙寰锛屼笁鏄熺殑Knox绯荤粺涔熷缑鍒版敮鎸侊纴鎻愪緵镟寸粏镊寸殑鏁版嵁鍒嗙被鍜屼缭鎶ゃ

9. 鏀硅繘镄勬悳绱㈠姛鑳

绯荤粺镟村姞鏅鸿兘锛屾牴鎹鐢ㄦ埛琛屼负璋冩暣鎼灭储缁撴灉锛屽簲鐢ㄦ悳绱㈡彁渚涗究鎹风殑鎻愮ず鍜岀洿杈惧姛鑳姐

10. 鏂痨PI鍜屽姛鑳芥墿灞

鍖呮嫭钃濈堕4.1銆乁SB Audio鍜屽氢汉鍒嗕韩绛夛纴鏀鎸佹洿澶氲惧囦氦浜掑拰鏁版嵁鍏变韩锛屽炲己浜嗙敤鎴蜂綋楠屻