设计框架 – 列表

列表有自己的核心排序规则,比如时间等。列表单位的颗粒度也支持自定义。

以Report为案例,则分日报,周报,月报,年报等。我们姑且把「日报,周报,月报,年报」定义为「单位」。

那么基于单位和核心排序的列表的设计框架,该有那些必须要素?

  1. 可方便快速切换单位的列表
  2. 可定义核心排序的功能(比如筛选时间区间)
  3. 筛选结果列表(包含当前筛选条件的可视化,可逆化)

map report 设计优化方案3

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 控件整理”

2013 网页设计趋势 – 图

原文链接:enfuzed

(ps:本人说话比较粗矿,如果翻译当中有不妥的地方,还请原谅。)

和其他任何事物一样,互联网也有自己发展的趋势。2013年网页设计在继续2012年趋势的基础上,又新出现了一些设计势头。enfuzed(也就是我们自己)为此做了一张可视化的图形给大家。虽然2013已经过了一半,但这些趋势也才刚刚开始。2013年网页趋势包括以下几点:

响应式,扁平化ui,极简洁,注重排版,裸眼3d(视差),瀑布式加载,内容为主,固定页头,单页面网站,大图片背景。

当然,还有很多很多,但考虑到图片的大小,我们缩减了一些。比如:支持retina屏,图形标量化。

我之所以没有把图形表量化画在图里,是因为这一点还不是很成熟。但是retina屏幕却日益增多。我猜也是因为很多人都没有真正领会这一点,所以目前能适应retina屏幕的应用不是很多。

话不多说,直接上图。

2013-Web-Design-Trends-Infographic

 

在Web与App的差异间探寻设计法则-pinterest

屏幕快照 2013-08-05 上午10.02.19

 

基于app和web版本体验一致,产品也基本一致的前提下,我拿pinterest做为分析对象,总结了从web到app转变之后的差异和特点,希望对未来指导app的设计有所帮助和启发。

那么,从web到app转变,主要需要注意以下五条法则:

法则一:信息整合

这里说的整合,是从设计角度来说的。简单说,就是界面上物理位置的整合:从web到app,从界面上复杂多样的功能,到极为单一的界面元素。

pad的区域是有限的,所以需要保证用户的视线是绝对的聚焦,绝对的专注。

对比pinterest web版本和app的首页

屏幕快照 2013-08-05 上午10.14.50

 

IMG_4309

 

法则二:功能页面尽量拆分

ipad版视觉集中,用户环境复杂,物理空间也有限。为了减少误操作,同时降低用户思考(选择)难度。需要把功能进行拆分,也就是说功能页面需要相对独立。

如图,web的“哪些用户repin到了哪些相册”,在app端被细分成了2块独立的功能板块:指向相册和指向个人主页的link是分开的。

pinterest-detial-web

屏幕快照 2013-08-05 上午11.28.19

 

法则三:link指向更父级

web的link指向可以细分到叶子。比如个人主页中我已发布的文章。但是在app端,button的指向没必要再细分到那个程度:用户使用app的核心诉求决定他们不会在这里有直接访问某个细节功能的需求,同时也可以说app的设计者是如何引导用户用不同的心态去使用同一款产品的不同版本(web和app,比如web主要用来发布,app主要用来阅读)。

法则四:hover才出现的信息需要慎重处理

如果hover才出现的信息足够重要,那么直接放出来吧。不那么重要的信息可以考虑用浮出层来实现。

法则五:重新审视功能

app很多时候是web的补充,或者说某一个最key功能的运营。

不适合app持有设备使用的功能需要放弃,而适合app持有设备使用的功能则需要加强。比如用ipad为pinterest拍照,那就应该内置一些图片处理功能。

后:

其实我自己在做以上总结的时候,也看到了很多甚至和以上原则相反的案例存在。只怪我自己经验浅薄,无法判断到底哪一个才是正确的。所以读者们请随意拍砖。

我也只是在各种尝试中试图揣摩出一些设计的建议和方法。但是用户却又是那么的感性,不是么?

所以,用户超爱的设计也许根本就没有所谓的准则,也不一定都出至nb的设计师之手。

 

后续更新:

今天pinterest更新了版本。有一个挺有意思的点:touch and hold the picture,you can pin,like or send it quickly。

试想,touch and hold不失为web 端hover 的替代佳品

移动信息架构-☞载要:http://www.uxbooth.com

层级式(Hierarchy):

层级样式是带有一个索引页和一系列子页面的标准网站结构。如果你在设计一个响应式网站,你可能会受限于此,然而它所带来的额外样式可以帮助你为适应移动设备而调整体验。

Luke Wroblewski在博文《移动为先》( Mobile First)中帮助我们首先关注于重要的内容:可以帮助我们创造更好的用户体验的产品特性和用户使用过程。

  • 适用项:整理需要跟桌面端网站保持一致结构的复杂站点。
  • 注意项:多面的导航结构应用于小屏幕上可能会给用户引起的麻烦。

辐射式(Hub-spoke):

辐射样式向用户提供了便于跳转的中央式索引,这是iPhone的默认样式。用户无法在分页面之间切换,而必须回到中央跳转。一直以来,这种样式主要用于工作流程受限的桌面端(通常是技术限制,诸如表单或者购买流程中受到的限制)。然后,这种样式在移动设备上越来越流行,这是由于用户使用移动设备时会专注于单一任务,以及由于设备本身的外型因素。这种样式的流行使得全局性导航愈发难以使用。

  • 适用项:多功能工具,其中每个都有不同的内部导航和目标。
  • 注意项:这种样式不适于用户进行多任务操作。

套娃式(Nested doll):

套娃样式采用渐进式导航引导用户查看到更详细的内容至。当用户操作不方便时,这是一种快速简单的导航方法。通过点击“前进”或“后退”,用户可以强烈感知自己所处何处。

  • 适用项:应用或网站的主题奇特或者主题之间密切相关。它们同样适用于内置其他父样式的子样式,诸如标准的层级样式式和辐射样式。
  • 注意项:用户无法在不同内容中快速切换,因此需要考虑这种样式是否方便查找,而不能让它成为查找内容的绊脚石。

标签视图(Tabbed view):

这是一种普通应用用户熟悉的样式。这种形式通过工具栏菜单集合为一系列的内容。这样用户可以在第一次打开应用时,便能快速扫过并了解应用的全部功能。

  • 适用项:基于一个相似主题的工具项和多任务情况。
  • 注意项:这种样式不太适合复杂类结构,较为适用于非常简单的内容结构。

便当盒/仪表盘(Bento box/Dashboard):

便当盒/仪表盘样式通过使用组件展示相关工具或内容的部分信息,再把更详尽的内容链接至到索引界面。由于这种样式很复杂,它在桌面端显示会比在移动端更为适合。这种显示醒目有力,用户只需要扫一眼就可以理解关键信息,但它严重依赖于信息清晰的设计呈现。。

  • 适用项:主题相似的多功能工具和基于内容的平板电脑应用程序。
  • 注意项: 尽管平板电脑的屏幕提供更多空间承载这种样式,但更为重要的是我们要理解用户如何与每块内容互动,以及我们要确保应用简单、有效、使用愉悦。

筛选视图(Filtered view)

最后,筛选视图样式允许用户通过选择筛选项来切换不同视图从而在一系列的数据中进行导航。筛选同分面搜索方法一样,是一种很棒的适合用户查询内容的方法。

  • 适用项:内容数量庞大的应用或网站,诸如文章,图像和视频。它可能为杂志样式的应用或网站提供了好的基础,或者是它可以作为另一个导航样式内的子样式。
  • 注意项: 移动设备上,由于筛选和分面搜索很复杂,所以很难在较小的屏幕上展示。