iOS与Android系统下,App界面设计的差异化

iOS 与 Android 不同系统自带不同设计语言和规范。很难说标准是什么,因为市面上App的设计比较随意,融合的比较多。

在此仅以两个我非常喜欢的应用 Pinterest 和 Medium 为案例去剖析两大平台设计的差异,以试图找到一些规律。


Printerest

  • 下拉刷新
  • 全局导航
  • 弹层
  • 更多
  • 操作栏
  • 文本输入框
  • segment

Medium

  • 下拉刷新
  • 全局导航
  • 操作栏
  • segment

继续阅读“iOS与Android系统下,App界面设计的差异化”

iOS 10 控件整理

Status Bar

status

状态栏在手机的最顶端,包含一些基本的系统信息,比如当前运营商(联通),电池容量,时间等等。状态栏通常跟导航栏是紧挨着的,共用同一个背景。

状态栏的背景色可以自定义,而且字体颜色有两种样式可供选择,白色和黑色。

状态栏可以自定义隐藏,但是这样做的风险就是用户不知道当前是用wifi还是3G,也不知道蓝牙到底有没有打开。

通常情况下,视频类的软件在全屏播放的时候,会选择自动隐藏掉状态栏。

ps:在应用中,stauts bar 处还可以覆盖一层“提醒”,比如微信。当你在刷朋友圈的时候,status bar 则会出现一条提醒:“点击可 back to top ”

Navigation Bar

Snip20151102_56

导航栏主要包含当前页面的标题,回退功能等信息。位置则在状态栏的下方。导航栏的背景系统默认是带有透明度的,不过你可以根据需要把背景调整成纯色,渐变,甚至是一张图片。

注意,导航栏上的元素位置不能随意更改:

1. 回退按钮左对齐
2. 页面标题在中间对齐
3. 操作右对齐(非常不推荐设计两个操作在右边,误操作的可能性非常大)

ps: 针对第三点,很多比较复杂的业务,确实很难做到只放一个操作,比如手机淘宝。

Tool Bar

Snip20151102_55

工具栏主要放置一些管理和操控当前视图的功能。在iPhone中,工具栏在屏幕的底部,在iPad中,还可以选择放置在屏幕的顶部。

跟导航栏比较类似,它的背景默认也是带透明度的,你可以定制成纯色,渐变或图片贴图。

工具栏通常是导航栏中操作的一个补充。

当前视图的操作不止一个的时候,则可以选择使用工具栏。比如手机淘宝详情页,除了右上角的“购物车”等等,还有工具栏上的“收藏”“购买”等等。

当键盘弹起时,工具栏可隐藏。

Search Bar

Snip20151102_57

搜索栏系统默认有两种状态:Prominent 和 Minimal。

这两种状态最大的区别就在于:未聚焦时,Prominent 更加明显和突出,有自己独立的背景色(也可以跟导航栏共用一个背景颜色),而 Minimal 则跟内容共享背景色;聚焦时,Prominent 直接替换导航栏的位置,背景样式可自定义,而 Minimal位置则不发生变化,背景也是系统自带样式。

但他们拥有相同的逻辑:默认会有占位字符在输入框中,当用户输入搜索词的时候,默认的占位字符则消失,同时右边出现“一键删除所有文字”的icon。
通常,你还可以在搜素框中设置“书签”“历史搜索记录”的功能,在搜索栏上方添加引导语。

Tab Bar

Snip20151102_58

通常可以理解为网页端的频道的概念。位置在屏幕的底部。系统默认的样式为半透明。

Tab bar 上能包含的对象是有限的,必须考虑可点击性。iPhone 是5个,iPad 是7个。

如果对象确实很多,那么最后一个 Tab 则可以用“更多”来替代。点击后,进入全部的对象列表。

注意,Tab bar button 上可以添加一些小元素来起到提醒用户的作用,比如一些小标签。当某个 Tab bar button 不可用的时候,则设置为不可用状态即可。

Table View

与Web上的列表类似。Table View 有两种样式:Plain 和 Grouped。

Plain:简单说就是树状结构。可一层一层点击进入。

Snip20151102_59

Grouped:则比较适合只有两层的数据结构。

Snip20151102_60

Table view 均可以添加 header 和 footer。 header 通常解释 Group 的含义,footer则多为一些帮助信息。

Table view 的左边可以添加图片,标题下方还可以添加副标题。

Snip20151102_62

Table view 的右边除了添加具备索引意义的箭头外,还可以直接显示值(Value)(值颜色比标题更浅)

Snip20151102_63

Models,Popovers and Alerts

以上均属于临时窗口的概念。当启用它们时,它们处在视图的最高层,同时,会有黑色的透明蒙层盖住底下的内容。

Popover

1. 类比Web上右键下的功能。直接出现在选择对象的上方。通常只包含选择,全选,黏贴等功能。

Snip20151102_66

2. 进一步选择。从页面底部长出。比较重要的操作,比如“删除”,会放在第一位,且可以用红色字体做警醒。最后一个 button 独立一行,通常是取消。

Snip20151102_64

3. 当选择的对象非常多的时候,可以考虑换成下拉式 popover,popover的高度可以直接设置为屏幕高度。

Snip20151102_67

Alert:类比 web 端的弹框。通常包含标题,副标题和操作(正向操作在右边,负向操作在左边)。

偶尔还可以附带文本输入框(但最多支持 2 行)。建议在录入非常敏感的信息时候用,比如密码等。

Snip20151102_65

Button

iOS7 以后,按钮的形态更像文字链接。

按钮的高度,大小和背景色均可以高度定制。通常来讲,按钮是有四个状态的:默认状态,高亮状态,选中状态和不可用状态。

Picker

Snip20151102_68

比较典型的案例就是选择时间。

选择器的背景色可配置为白色和灰色。其他的样式都无法更改。选择器通常出现在屏幕底部,同时也可以内嵌在页面当中。

Segment

Snip20151102_69

每一个segment既可以单纯用文字,也可以单纯用图片(图标),但是不要同时都用。segment 里面的对象通常是紧密相连,但又互斥。

Sliders

Snip20151102_70

在用户选择一个连续性的对象的时候使用。且通常不需要非常准确。你还可以为两端设计一个 icon 来示意。

Stepper

Snip20151102_71

梯度选择。相对 slider 而言,它更像是精准数字的叠加。整个控件的样式均可以高度定制。

Switch

Snip20151102_72

开关控制。除了开关状态的背景色可以定制外,其他均不可以修改。

Keyboard

系统默认的键盘样式不可定制。但是允许App自定义自己的键盘。

 

继续阅读“iOS 10 控件整理”