Android 和 iOS的设计区别（笔记）

iOS Design Themes（iOS设计主旨）

ios与其他平台区分的三个主要主旨：

1.Clarity（清晰）

在整个系统中，文字在各种尺寸上都清晰可辨；

图标精确而清晰，装饰巧妙且恰当，并且对功能的敏锐关注激发了设计；

负空间，颜色，字体，图形和界面元素巧妙地突出重要内容并传达交互性。

2.Deference（遵从）

流畅的动作和清晰美观的界面在帮助人们理解并与内容互动的同时，还能不与之竞争；内容通常填满整个屏幕，半透明和模糊通常暗示更多；

尽量少的使用边框，渐变和阴影可使界面轻量，同时确保内容至关重要。

3.Depth（深度/层次感）

清晰的视觉层和逼真的动作传达层次，赋予活力，促进理解；

触摸和可发现性提高了乐趣，并能够访问功能和附加内容而不会丢失上下文；

过渡可以在您浏览内容时提供深度感。

Design Principles

为了最大限度地提高影响力和覆盖面，请在考虑应用的身份时牢记以下原则。

1.Aesthetic Integrity（审美完整性）

审美完整性体现了app的外观和行为与其功能的整合程度。

例如，一个帮助用户执行严肃任务的app可以通过使用微妙、不显眼的图形、标准控件和可预测的行为来保持他们的专注。

另一方面，沉浸式app，如游戏，可以提供吸引人的外观，传递乐趣和刺激感，同时鼓励发现。

2.Consistency（一致性）

一个一致的app通过使用系统提供的界面元素、众所周知的图标、标准文本样式和统一术语来实现熟悉的标准和范例。

这种app符合用户期望的特征和行为

3.Direct Manipulation（直接操作）

对屏幕内容的直接操作会吸引用户并促进理解。

当用户旋转设备使用手势触动屏幕内容时会体验到直接操作。

通过直接操纵，用户可以看到他们行动的直接、可见的结果。

4.Feedback（反馈)

反馈对用户的行动进行了确认，并显示行动结果以使用户了解情况。

内置的iOS app为用户的每一项操作提供可感知的反馈。

轻触时会突出显示交互元素；进度指示器会传达长时间运行的项目的状态；动画和音效有助于阐明操作的结果。

5.Metaphors（隐喻）

当一个app的虚拟对象和动作都是对熟悉事物的隐喻时（不管基于现实世界还是数字世界），用户学习的更快

隐喻在iOS系统中发挥的很好，因为用户是直接与屏幕产生物理交互的。

用户移动视图来查看更多的内容；拖拽内容；切换开关、移动滑块并且直接滚动来选取值；甚至可以像翻书或杂志一样轻快翻页。

6.User Control（用户控制）

在整个iOS中，用户是掌控者，而不是app。

app可以建议一个行动方案或警告危险后果，但app接管决策通常是一个错误。

好的app可以在用户授权和避免不必要的结果之间找到正确的平衡。

app可以通过保持交互元素熟悉和可预测，确认破坏性操作以及轻松取消操作（即使它们已经在进行中）来使用户感觉自己在控制。

使用平台：iphone7

下图（左图）是新浪微博的首页，页眉是ios典型的导航栏，标题在中间，按钮分布在左右两边，因为是首页，不需要返回按钮。微博在这里放置了一个叫做“好友关注动态”的页面入口，用更多元的方式为用户推荐好友。

用的是舵式导航，置于中间突出位置的是发布按钮，点击后从底部飞出6个按钮，用户可以选择需要的发布方式。而原来的发布按钮“+”号，顺时针旋转变成了X号，点击X号又逆时针变回“+”号，同时页面回到动态列表。在这个用户最顺手的位置做了这样的交互，方便用户快速地在发布和浏览之间快速切换。这两个行为方式在社交类APP里是最核心的行为。

如上图所示的首页，有一个ios风格的内嵌式搜索框。刚进入首页时候是没有的，当页面刷新或下拉之后就会出现。因为用户无论是刷新或者下拉之后再返回，都是因为没有找到或者错过了自己想要的内容，这个时候提供搜索给用户，可以让用户自己检索想要的内容。

左边这个是经典的ios风格下拉框——带小三角的圆角矩形。右边这个做了一些改变：(1)当分组很多的时候，下拉框可以上下滚动，显示更多的内容。如果用tab导航的话，由于分组的名字是由用户起的，字段长度差异可能会比较大，会显得比较凌乱，而且首页的元素已经够多了，再用tab导航的话内容区域就更小了。下拉框则可以在不需要时候收起，节约空间。(2)在下拉框的底部有一个“编辑我的分组”按钮。这样做的优点在于不需要频繁地跳转到另一个页面，可以直接快速的切换分组，只有在要对分组进行编辑时，才会跳转到新的页面，在新的页面用户可以更专注于编辑分组，而不用担心误操作，毕竟下拉框空间有限，不方便直接编辑。再说回左图，有个小问题，就是图标用了雷达的图标。用户点开会发现除了雷达还有其他的2个功能，所以用雷达的图标代表所有的功能会有歧义，它正确的意思不是“雷达”而是“雷达等功能”。不喜欢用“雷达”的用户，也会比较难发现“扫一扫”和“打车”的功能。（现在最新版本的微博里右上角只有“扫一扫”和“打车”，并且默认显示扫一扫这个比较常用的功能）

微博中，下拉刷新和页面加载用的都是这样的菊花形加载，这种加载方式只表示状态，没有进度显示，如果用户长时间的等待的话，会感到不耐烦，不知何时才会加载完。但下拉刷新和页面加载都属于短时间的加载。在网络正常的情况下几秒之内就能完成加载。所以不需要显示进度，只需让用户明白正在加载即可。

微博的列表从整体的结构来说是以垂直列表为主，穿插着小图轮播式的“好友关注”和“相关文章”。但是往细了说，根据微博内容的不同，呈现的结构也稍有区别，这些设计模式同样也出现在其他社交类应用里：

1）纯文字微博

除此以外微博还有很多类型的单元格，都是在文字后插入其他的内容，例如图片、视频、链接等。

2）图片微博

文字后插入图片的形式是微博乃至大部分的社交APP里最常见的一种模式。如下图所示的是插有图片的微博。根据图片的数量不同，布局上会有些变化。只有一张图片时，按实际比例展示成缩略图，优点是展示出图片最真实的比例效果，缺点是当图片是竖图的时候布局不是特别好看。图片大于一张时会变成网格的布局，优点是在有限的空间里罗列尽可能多的内容，尺寸统一的方形图片和较小的间距，看起来比较有品质。有些爱玩的网友会利用这个特点进行自定义的设计，例如把9张局部的图拼成一张大图，更有趣味性和视觉冲击力。

值得一提的是，当图片为4张时，正好形成一个四宫格。这样就不会导致第二行只有一张图片了。不过在有些app里还做了更好的处理，就是把4宫格单张缩略图的尺寸比9宫格的单张尺寸做得略大一点。这样排版上会看起来更饱满。

3）视频微博

除了图片以外，插入视频也是非常常见的一种模式。如下图左图所示，微博的视频用一个相同的大图比例呈现，图片上会有一个播放按钮。但其实当视频拖动到页面中间时，视频会自动以无声的方式播放并显示进度。优点是可以让用户实时地看到视频内容，比较生动。

4）文章微博

上图右图所示的是发布文章所生成的微博，会以一张较大的封面图加上一行标题（图下方）的形式呈现。这种形式在一些电商的社区也是常常会看到，例如淘宝微淘里的“热文”。单张大图以统一的比例呈现，与单图微博（左上图）不同的是，它更有感染力，看起来更有档次，让人产生一种内容很专业的感觉。因为在信息量如此之大的微博（包括其他社区），用户往往是匆匆的浏览，如果不增强感染力，很难让用户驻足，甚至去浏览较长的内容。标题都在图片之下，可见图片才是吸引用户的首要元素。不过微博这里的设计，标题的存在感似乎太弱了一些。和图片的整体性有点欠缺，这样容易让用户产生只有一张大图的错觉而错过文章。

5）其他链接

除了以上所述的几种主流的单元格模式以外，有些微博在文末也会插入如下图所示的其他链接，可以是文章，也可以是商品、音乐等其他内容。以图片+标题等内容的形式呈现。比起纯文字来更生动，还可以知道链接的属性，例如音乐的话上面会有一个播放的图标之类的，缺点是感染力不够，优点是不会占太多空间，在有限的空间里给用途提供足够多的信息。

6）小图轮播的推荐列表

下图是微信的好友关注，其实不止是好友关注，还有推荐的文章等，都会以这种形式穿插在微博列表里，目的是向用户推荐好友或文章，以促进活跃度及强化社交。同时又不能影响用户正常浏览微博，所以用这种形式可以在有限的空间里推荐足够多的好友或文章，或其他信息给用户。缺点是在用户快速浏览时容易忽略。

1）下图左图是微博一级导航下的第二个tab——消息。同首页一样，标准的ios风格导航栏和内嵌式搜索，一进来的时候搜索是隐藏的，下拉才会显示。

页面内是标准的垂直列表。这种形式的优点是简洁清晰，冷静高效。用户到这里来往往是主动寻找一些内容，不像在首页常常是浏览的。所以这里不需要像首页那么复杂详细的列表，只需要简洁清晰的列表即可。根据用户从左至右、从上至下的阅读习惯，左边一排呈现的是图标或头像，用户可以一目了然。而“@我的”、“评论”、“赞”三个核心的社交功能图标置顶，之后的内容按时间由近及远排序，让用户可以随时见到最新的消息。

上图消息列表有2种单元格。一种是带箭头的二级列表，进去以后是子列表。这种形式的列表缺点是中间空白太多，有点浪费空间，而且不适用于层级太深，容易造成用户的厌倦。所以微博在这里只用作二级列表，再进去就是最后一层列表——微博列表，层级很浅。

另一种是没有箭头的列表，进去以后是对话框列表。优点是显示了一部分内容信息，用户可以快速的做出判断是否有兴趣查看，提高了使用效率。根据ios的操作习惯，左滑可以进行删除。缺点是呈现的内容太多不能再放置其他操作，比如箭头、控件等。所以这种形式最适合用于这种消息列表。

2）上图（右图）是“我”的界面。“我”与“消息”的界面一样，是一个标准的垂直列表页。由于这里只是功能的陈列，不像消息列表所要显示时间等信息，所以这里每个单元格的高度都不高，刚刚好容纳一行标题。“新的好友”、“我的相册”、“草稿箱”这些原始的功能层级都不深，而“微博钱包”、“微博运动”、“粉丝服务”、“粉丝头条”这些扩展的功能进去以后都是一个独立功能的首页。所以这里的内容层级都比较浅，适合这种带箭头的列表，可以直达目标页面；四个扩展功能后面还有灰色的小字用来引导用户；根据具体页面的类型还进行了分隔。所以整个页面看起来简洁清晰，冷静高效。

最后，这两个页面时都有一个共通的缺点，就是只有标题的单元格和有补充信息的单元格放在一起，布局上疏密明显，只有标题的单元格看起来很单薄，标题右边空荡荡的。而与其他信息的单元格对比之下就觉得密密麻麻的。

下图（左起第一张）是微博的“发现”页面。头部是ios经典的导航栏搜索。下面是轮播banner，这里用了轮播是为了在有限的空间里多呈现一些广告内容。再往下有两行入口图标，然后是微博列表。

微博列表模块的开头部分有个导航标签式的导航。如果页面上滑到了微博列表头部的位置，或者点击某个标签，这条标签式导航就会吸到页面顶部，变成标签式导航样式的分段式导航，见缝插针插进了导航栏。这是因为每个标签下面的内容信息量很大，还要分出第二层级，也就是吸到顶部以后

该导航下面出现的一行标签(见右图)。但是分段式导航的标签不宜太多，最好2-3个，微博用了4个，但所幸都是2个字的，看起来不算太拥挤，因为还有返回按钮，如果太拥挤的话，第一个标签离返回太近也会有歧议。布局上也会显得头部太重。

如右上图所示，“热门”、“榜单”、“视频”这三个板块都是微博内容，标签多于5个，所以做成了滚动式标签。

这个设计的优点在于灵活的运用了标签式导航的变化，让用户在没有明显的跳转的情况下，顺利的切换，不影响用户阅读的同时，承载了更大的内容量。缺点在于标签不宜太多，例如“热门”下的标签

有三十多个，后面的标签点击率会很低。并且如果不是根据用户的偏好进行排序的话，很有可能用户并不喜欢前面的内容，而喜欢在最后面，但他未必知道后面会有，也未必有耐心浏览到最后。

而最后的“头条”是用户可以自己定制的新闻内容，所以只放了4个优先级最高的，最后一个“更多”点击后进入“全部频道”（见上图右图），可以调整优先级，或者选择想去的频道。与底部导航栏一样的是，关闭按钮还是在底部，这样方便用户快速地回到头条页面。缺点同样也是标签过多容易造成用户的困惑。还有，不是在原标签下直接展开的，而是滑出一个浮层，所以可能会有点跳出感。但比起滚动式标签还是好一点，因为这种网格式布局的标签列表，把每一个标签都平等清晰的呈现给用户，便于用户快速的选择，而不用反复操作滑动去找不确定是否会有的标签。

1）下图是“我”里的“我的赞”。页眉也是典型的ios风格。标题在中间，右边是ios风格的“更多”（安卓是竖着的，之后分析安卓的app时候会有图），左侧是返回，并且带有上一级的标签，即“我”。这页的标签式导航是一个典型的标签式导航，并且一直置顶。无论页面如何滚动，它一直都在，用户可以便捷的再不同类目之间切换。

2）点击三个点的“更多”按钮从底部浮现选项，可以选择“刷新”或“返回首页”。这里只有2项，其实也可以做成2个按钮放在右上角。之所以这样做，好处首先是给用户更大的点击空间，避免误操作。还有就是页眉的布局不至于太挤。缺点就是需要多点一步。并且在上面点击后从底部浮出浮层的话用户的操作幅度有点大。但这和首页的下拉框是有区别的，下拉框主要是同级页面间的切换或者功能的切换。而这里是显示更多操作，所以也不适合用下拉框。

在日常的使用中，点亮手机屏幕时，我们第一时间看到的应该是手机的锁屏界面，可以说手机的锁屏界面就像是一扇通往数字世界的大门，如何装点这扇大门，不同的手机操作系统给出了不同的答案。看到iOS 的锁屏界面时，很容易就让人想到“简约”一词，该系统的锁屏界面主要是呈现信息，可操作的功能并不多，如果我想播放音乐或者使用除了拍摄、开关手电筒以外的功能，就需要先解锁进入到主屏界面才能实现。

而在OriginOS Ocean中，锁屏界面被赋予了更多功能。它的指纹解锁区域四周布置了功能快捷入口，我还能够根据自身的使用习惯对其进行调整，这让我在锁屏界面中就能进行“零层级”操作。现在，我只需要将指纹解锁区域左上方的按钮拖拽到指纹下半部分就能直接打开歌曲播放列表，无需再进入主屏界面进行操作。

在信息呈现和操作体验方面，iOS 与OriginOS Ocean 的不同，还体现在小组件的设计上。iOS 上面的小组件主要是用于呈现信息，比如其音乐小组件主要的功能是展示最近播放的音乐，如果我想要播放歌曲，需要点击组件进入到音乐应用当中才能完成操作。而OriginOS Ocean则在操作方面带来了更便捷的体验，它的原子随身听组件可以实现多种功能，让我在原子随身听面板就能完成音乐的播放、暂停与切换操作，而且还可以无缝切换不同音乐平台的歌曲，这无疑提升了我的操作便捷性。

进入到主屏界面之后，我还能感觉到，虽然iOS 与OriginOS Ocean 都选择了简约的设计风格，但两款操作系统的主屏设计给人带来的体验并不相同。在iOS 的主屏界面中，我只能调整图标、文件夹的布局；而在OriginOS Ocean 中，我不仅可以直接在桌面上改变图标、文件夹以及小组件的图标尺寸，还能改变文件夹的颜色。在该系统的变形器功能中，我还能一键改变系统风格、更换官方主题或者更换官方壁纸。

在OriginOS Ocean 变形器功能的官方壁纸更换入口中，我还发现了该系统新增了多款行为壁纸，能带来更强的互动感。比如在应用了“光之遇见”行为壁纸后，我不仅能通过一定的操作让壁纸产生不同的反馈，而且还可以为壁纸中的人物更换发型和斗篷，这让我感觉像是在壁纸中玩 游戏 一样，非常有趣。

在控制中心方面，iOS 与OriginOS Ocean也采用了不同的设计。除了常规的亮度、音量调节按钮外，OriginOS Ocean 的控制中心还能呈现电池状态、网络状态等信息，而且当我想要调整控制中心的功能按钮时，不需要像iOS 一样进入到设置功能中才能进行更改，只要点击左上角的图标就能进行改动，使用起来非常方便。

总的来说，在使用iOS 的过程中，我发现虽然iOS的界面设计简约、动效流畅，但其在操作便捷性方面依然存在不足；而在使用OriginOS Ocean 的时候，它不仅给我带来了便捷体验，而且还让我感受到了许多趣味。对于那些想要获得更多新奇操作感受的朋友，我推荐深入体验OriginOS Ocean。