移动应用空白情况页面的设计-Bowinshandesign

Bowin_Shan_Design:

     移动应用的设计中,最容易被忽视的地方就是空白或者异常情况的设计。从传统PC时代web的异常页面如404,502等页面的设计体验迁移过来,移动应用的空页面,网络故障页面等展示也有相似的设计模式。从以前的纯文本的排版设计,到后来404成为设计师们展示图形创意的舞台,移动应用的空白情况页面的设计也从纯文本提示到后来精彩纷呈。然而在移动应用的设计中,空白页面的的作用不仅仅在于给用户以温柔或者精彩的提醒,安抚用户焦急或是疑惑的情绪,更重要的是,空白情况页面可以引导用户去填补“空白”。人都是害怕空虚寂寞冷的,当你面对一个空虚寂寞冷的页面的时候,善意的指点迷津的一些语言和画面告诉你咱们还是可以有方法来填补你的寂寞空虚冷,这时候,用户的操作行为就会被触发,潜移默化中指引用户完成填补空白的工作,那么,无论从用户个体的活跃度上还是整体的留存率,活跃度上,你设计的空白页面做到了拉升的作用,对电商产品和社交产品等来说,这些页面可谓是自己展示产品调性,曝光功能,加深引导的黄金地段。

     那么言规正传,空白页面到底该怎么设计呢?先让我们看看别人家的应用都是怎么设计的,按照设计模式的不同,我们可以把空白情况页面的设计纷呈以下三类:

1.GW模式。(G=graphic,W=words)即为图案+文字模式。图案经常为一些可以表示“空白”隐喻的图案或者是自家应用的吉祥物相关的图案,抑或是可以为跟页面引导相关的图案。文字一般包含:标题,说明。标题通常是解释此处空白的原因,如“Oops,地理定位被关闭啦,无法使用该功能哦”,“网络出问题啦”等,说明则解释出现此状况的原因和解决办法等。文案的风格经常根据产品的调性去设计,有些走卖萌路线,有些走高冷路线,有些甚至走狂暴路线等等。鉴于此类型是一种最常见的类型,单纯的包涵文字或单纯包涵图案的设计手法也归纳到GW模式中。如下图:


2.GWI模式。(G=graphic,W=words,I=instruction)即为图案+文字+指引线索模式。前两者同GW模式,现在来看看指引线索。指引线索理论上应该作为新手指引的设计范畴,但是结合空白页面,加入指引,引导用户进行某项行为或者感知某些信息,对于功能的教学和使用频率的提升有着重要作用,同时引导又肩负传达品牌形象,产品调性,产品核心价值等使命。指引线索经常分为:1.指示性图案,如箭头,画圈图案等;2.指引性文字说明。如下图:


3.GWF模式。(G=graphic,W=words,F=function port)即为图案+文字+功能入口模式。同理,GW同之前,功能入口则是一种新的设计方式,相比较指引线索,功能入口更加简单粗暴,直接将所要指引的功能放一个快捷入口出来,摆在空白页面上,让用户轻松地完成目标。这种方式的双刃剑特性非常明显:说优点,简单明了,快速方便,告诉用户这个页面是空白的,那么如何解决,给你一个按钮或者链接,直接就可以解决问题,bingo!在社交或者电商产品中可以快速诱导用户触发贡献内容或者购买行为等;说缺点,这无异是对产品结构的一种挑衅和破坏,相当于给一个设计严正精美的城墙里挖了个地道,而且大多数应用的做法是只会让这个地道出现一次,painful。但是总体上来说,还是利大于弊的,为了数据,为了用户的新手引导,有些时候不得不这么做。如下图:


    所以,总结了别人家的设计模式之后,我们可以来看看如何去设计自己家的空白页面。这里我们以最牛逼的图像社交产品instagram的DIRECT功能的空白页为例,来解析下设计流程:


1.明确目标。这是最重要的一步,你要弄清楚(请和老板,客户,产品经理等沟通清楚)这个页面合适出现,在哪里,给谁看,想让他们做什么。想清楚这之后,牢记在脑海里,因为一个产品会有众多空白页面,每个页面可能都不是通用设计能解决的,针对具体问题,要去弄明白具体的设计目标。如DIRECT是insta中一个用于用户可以直接发送照片和视频给自己好友的功能,该页面会收纳你的所有发送历史。那么问题来了,如果你一条都没有发,或者第一次使用这个功能,你该怎么做?这个就是设计目标,

        1.我要让用户明白这个功能到底是做什么的,明确用户目标;

        2.我要让用户明白,这个功能在哪;

        3.我要让用户明白这个功能怎么使用。

2.选择设计模式。根据我们的设计目标,我们会发现这里并没有要表达品牌形象或者产品调性方面的要求,目标都是围绕着功能的指引和说明,而且该页面中已经包涵了功能的使用入口,因此考虑选择GWI模式,即做好图形和功能说明之后,加入引导线索。

3.设计文案。文案先行还是图形先行是一个永恒的问题,这个不同设计师可能处理问题的方式不同,从图产生文和从文去配图都没有错,但是从工作效率来说,先通过产品经理或者设计师等相关干系人给出的页面文案后,我们的设计工作会更加得心应手,将文字转义成图案。这里我们看Direct的文案设计,分为标题+说明。标题给出该功能的名称“Instagram Direct”,说明里用了两句,一句是解释该功能解决什么问题,第二句的补充则说明了该功能的一些补充属性,比如这里解释了该功能的私密属性,只有你发送给的朋友才能看到这些内容。

4.设计图案。根据文案的含义和设计目标,用图案来叙事。有些需要表达产品品牌内涵或者品牌形象,产品调性的目标会引导我们去设计一些可爱的吉祥物形象等来对产品进行拟人拟物化表达,让产品富有灵魂和生命,而非冰冷的代码堆砌物。有些功能性的表达则需要我们传达功能本身的含义,所以经常有设计师喜欢将功能的表达Icon化,一些简单线框或者填充化Icon便可以表达功能。如Direct的设计中,就是采用了Direct的功能Icon去表达功能说明,传达功能的形象,如:



5.设计引导线索。前面四步解决目标1和3,而这一步解决目标2,告诉用户该功能在哪里,也包涵了该功能该如何使用,比如点击某个按钮,向右滑动等等。有些可以采用箭头的引导,有些可以采用悬浮气泡,有些可以采用放大镜等隐喻来设计。这里采用了比较常用的悬浮气泡的设计模式。如图:


    这样,我们就完成了一个空白页面的设计。总结起来,对于空白页面的设计就是一句话:明确目标,选取模式,逐个击破。

    相信通过不断地揣摩他人的设计意图和模式,总结自身的工作结果,思考产品目标,我们一定可以设计出最牛逼的空白页面。对于其他页面的设计,方法也大抵如此。


[转+总结]如何写交互文档

 ̄靑。:

最近看了一些写交互文档的文章,有写给PM的也有写给UE的,之后自己总结了一份。算是初稿,之后会根据具体情况做进一步优化

其中引用文章链接:

如何写一份交互文档:http://www.lofter.com/like?act=qbdashboardlike_20121221_01

PM的原型应该是什么样:http://mt.sohu.com/20150506/n412466995.shtml

关于制作产品原型时的建议:http://www.woshipm.com/pd/40989.html

-------------------------------------------------------------------------











































大理 四月 阴天

《移动设计》 • 读记

作者:傅小贞,胡甲超,郑元拢 丨 出版社: 电子工业出版社

       前言:14年项目阶段性结束后,刚好碰上公司15年战略规划,在人员不太充裕的情况下加入了原来触及不多的移动项目设计组。因为之前主要做PC端的交互方面,所以后来还是准备顶着入门的标签在AMAZON上把移动设计相关的经典书籍扫一遍。

       《移动设计》内容主要是(淘宝)团队成员工作的一些积累和沉淀。因为出版快接近两年,现在来看的话主要体现的是移动设计的一些总结和概念梳理。因为创新的东西习惯以后多数会很自然的被当作模式来用(当然这也是创新的成功之处)。但书中的信息架构对刚入移动端的同学来说还是很有帮助的,主要涉及的内容包括:Features(特征),Principle(原则),Frame(框架),Details(细节),Dynamic(动效),Adaptation(适配),Innovation(创新)以及Tools(工具)。开始的General(概述)只是拿来引入,最后的Flow(流)重点把视觉流和操作流挑出来单独陈述,其实在Principle(原则)章节已经提及(流畅性)。

Features(特征)

       Features(特征)是接触移动互联网需要重点关注的一块内容,因为正是基于移动端的各种特性,我们才去谈它的框架,谈它的设计原则,才需要去做适配等等。移动端的特征其实主要表现在局限性多样化上面。书中主要从三个方面来说明。

       1.使用场景:移动运用的使用场景是多样化的,典型的场景有休闲、等待、忙碌。不同的场景下,移动应用的使用情况都不相同,我们需要对各种场景带来的问题去做额外的考虑(如中断)。而复杂的场景因素又带来了移动运用使用过程中的局限性,如:光、噪音、网络、姿势等等都会对移动应用的使用带来各种层面的影响或干扰。

       2.网络特征:目前移动应用的网络主要涉及2G、3G、4G和Wifi。很多情况下我们都需要针对不同的网络环境去考虑不同的设计,如加载方式(全页面加载,分步加载,懒加载,智能加载、离线访问)、加载内容等等。当然,低端网络的极限性也会对移动应用的体验带来致命的影响。

       3.设备物理特征:设备物理特征的多样化主要体现在尺寸(品种繁多)、按键的差异性、丰富的传感器以及交互方式。而尺寸的大小(相比PC端,移动端的屏幕更有限)又给移动设计带来了很多的极限性。这里面提到了一些设备物理特征的概念:分辨率、物理尺寸(对角线、inch)、屏幕密度(120dpi ldpi、160dpi mdpi、240dpi hdpi、320dpi xhdpi)以及一些计量单位(dpi、ppi、dp)。

 

Principle(原则)

       Principle(原则)是依据前面提到的特征来定的,主要涉及8大原则。当然,《简约至上》中的删除、组织、隐藏、转移作为通用原则在各个地方都会被穿插使用的。

       1.内容优先:基于移动设备尺寸的限制,内容优先是非常重要的,主要从3方面来优化:1)重组(针对PC端的内容设计);2)突出信息,简化导航(用户真正想要的是信息内容);3)提升屏幕利用率(屏幕尺寸的显示)。

       2.为触摸设计:移动端的交互方式比PC端丰富很多,多数从PC端过度到移动端的应用都沿用了PC端过多Tap的交互方式,而忽略了真正意义上的触摸。所以移动设计需要额外关注丰富的手势带来的各种交互。1)建立手势交互规范(手势的统一性);2)优先自然的手势,而不是单一的Tap(如各种滑动、旋转等等);3)引导对手势的学习;4)特殊手势不是必须的(移动端的手势交互很多,但对于新手用户来说不容易记忆);5)可触区域尽量大于9*9mm(可触区域可以是对原有控件的覆盖);6)提供手势的过程反馈。

       3.输入转换:移动设备的文本输入一直是硬伤,在设计文本输入时可以做一定的转换。1)转换文本输入为选择(可以是可视化的选择,或者选项的选择);2)利用传感器实现输入(语音、扫描识别、LBS技术)。

       4.流畅性:流畅性重点涉及的是视线流和操作流(需要注意的是操作流节点的覆盖带来的问题)。

       5.多通道设计:运用视觉、听觉、触觉来协同完成系统的输入和输出(各种反馈的协同运用)。

       6.易学性:尽量不要依赖用户手册,帮助提示应该跟功能结合,而不是在启动的时候一味的展示(需要注意帮助提示的出现和消失)。

       7.中断处理:根据场景的多样化,中断在移动应用中是很正常的现象。所以需要1)保存用户的操作(断网、编辑中断,如微信的评论等等);2)衔接用户的记忆(上次看到的内容);3)不同设备的切换。

       8.智能有爱:在细节的地方加入一些贴切的创新元素。

Frame(框架)

       谈论框架的维度,主要涉及深度和广度两个方面。从而可以产生深而广、深而窄、浅而广、浅而窄4种不同的形态。但基于应用场景(浅一些好)和硬件设备(窄一些好)的分析,产品框架的移动化更趋向于浅而窄的设计。说到浅而窄的设计其实又跟删除、组织、隐藏、转移的设计原则挂钩了,书中主要给了4种处理方式:1)移动化(不要单纯从PC端移植);2)路径扁平化(针对的是核心内容);3)层级的合并(其实是层级的路径合并,层级并没有减少。如标题和内容放在同一个路径下,通过展开收起的方式来处理);4)隐藏。

       框架另外一块大的内容就是导航。导航目前大多数的实现方式已经形成了一种模式,具体分为:1)标签式;2)宫格式(可扩展,如标签的强调);3)平铺式;4)列表式(可扩展,如列表的折叠);5)抽屉式;6)点聚式。另外需要注意对边缘的利用。

Details(细节)

       细节和动效其实是一起的,因为动效本身就是细节处理的一部分。书中拿出来分为两块讲,应该是基于不同团队成员的整理,或者单节内容数量以及零碎性的一些考虑。细节这块主要分4部分:1)人机交互多样性(合理的手势、键盘遮挡问题的处理、声音以及摄像头的利用、设备的存在感以及创造虚拟世界);2)界面可视化(信息结构的可视化、信息内容的可视化、操作线索以及反馈);3隐喻引导用户(拟物化、线索、环境);4声音互动(反馈、氛围、品牌认知、输入输出的交互)。

Dynamic(动效)

       动效这块主要强调能做什么以及什么时候来用。能做什么:1)提醒用户怎么做;2)到哪里去;3)减少焦虑;4)故事性;5)引导触摸;6)营造气氛。什么时候用:1)启动页面;2)加载;3)转场;4)引导;5)反馈(过程反馈&结果反馈)。

Adaptation(适配)

       适配来源于移动设备物理特征的多样性,同时也是为了考虑更多人体验的一致性(心理感受的一致)。客户端产品的适配设计:1)整体缩放(首页);2)间距增加(X宫格);3)单向拉伸(列表);4)智能调整(栅格化);5)延展性(启动界面)。另外需要考虑横竖屏的变换。多设备响应式设计:设计和开发应该根据用户的行为及设备环境进行相应的响应及调整(包括布局、导航、图片、文字等)。响应式设计带来的优点(开发、维护、运营成本优势;兼容性优势;改动灵活)和缺点(用户的内容需求不一定能得到很好的满足;开发成本高;代码累赘带来加载速度的减慢)需要正确的看待。

Innovation(创新)

       这部分主要提到了(产品设计方法学中)几种创新技法:1)逆反法(灯泡);2)离散法(桌面快捷方式);3)移植法(手机拍照);4)还原法(下拉刷新);5)强化法(对某一属性进行强化);6)组合法(各类跑步软件);7)对应法(拟物化、模拟仿真)。另外需要注意创新价值的评估。

Tools(工具)

       工具其实多数都是根据项目团队或者个人的需要来定,目前用的比较多的还是Axure。

小结:移动设计归根结底依赖于物理设备的特性(尤其android设备的多样化,尺寸、硬件等等)。在大的通用原则(删除、组织、隐藏、转移)之下,可以借助前面提到的8项设计原则,避免简单的应用移植。注意细节的处理以及动效的使用,视线流、操作流的流畅性。根据项目的实际情况来做适配等等。

 

美国UX达人推荐的用户体验经典书籍

浩天然:


想了解用户体验(UX)并进一步学习?美国的UX达人Witney Hess列出了20本UX爱好者必读的20本书。你可以收藏这个书单。

一、UX初学者必读

《The Design of Everyday Things》 设计心理学

 作者:Donald A. Norman

本书封面上有一只茶壶,茶壶的壶嘴和把手在同样一边,如果你倒茶,你很有可能就把自己烫伤——诺曼告诉你,生活艰难,往往是「坏设计」惹的祸。读懂交互,首先得读懂人对设计的需求。

 

《Don’t Make Me Think》 点石成金 

 作者:Steve Krug

这本书的特点,首先是短小精悍,200页的篇幅,一点都不会罗嗦,一个中午,或许临睡前,甚至在飞机上,上下班途中,你就有可能把它一口气读完(怕最有可能的是拿到书以后就爱不释手地读下去了)。

其中讲Web可用性三大定律,第一条便是——别让我思考。

 

二、设计思想方法

《Sketching User Experiences》 用户体验草图设计

 作者:Bill Buxton

比尔·巴克斯顿本是音乐家出身,早在三十多年前便在他的艺术工作中应用计算机,曾于20世纪70年代末在多伦多大学从事研究,开发数字乐器,并大胆采用种种新颖的界面,自此一举成名,此后相继在施乐帕克研究中心、SGI公司和Alias I Wavefront公司担任要旨。目前,比尔·巴克斯顿在微软任职,成为研究的中坚为量。

 

《Emotional Design: Why We Love (or Hate) Everyday Things》 情感化设计 

 作者:Donald A. Norman

美观的设计品更好用。

 

《The Inmates Are Running the Asylum》 交互设计之路 

作者:Alan Cooper

如果说阿兰·库珀(Alan Cooper)是交互设计领域的教父,那么《交互设计之路》就是一本「圣经」。

 

 三、进阶读物

《The Elements of User Experience》 用户体验的要素:以用户为中心的Web设计

 作者:Jesse James Garrett

这绝对是产品经理的第一本入门书。

 

《About Face 3: The Essentials of Interaction Design》 软件观念革命:交互设计精髓 

 作者:Alan Cooper, Robert Reimann, and David Cronin

Norman是轻松的讲故事老头,Krug是让你简单入门的速成高手,Cooper是一个学者、研究人员、设计师。

 

《A Project Guide to UX Design: For User Experience Designers in the Field or in the Making》 

 作者:Russ Unger and Carolyn Chandler

第二版加入了业界最关心的几大新趋势:Responsive Design (包括Mobile First),Content Strategy和Lean UX。同时结合项目管理上的决策思路,感觉读后不仅对于现今的UX设计流程做个梳理,对于一个完整项目的把控也将会有一个提升。

 

 四、设计原则

《Designing for the Social Web》 筑巢引凤:高黏度社会化网站设计秘诀

 作者:Joshua Porter

本书列举了大量真实互联网世界的界面的例子,结合社会心理学的基本理论,深入浅出地介绍了设计优秀的社会化网站的具体策略。

 

《Designing Interfaces: Patterns for Effective Interaction Design》 界面设计模式 

 作者:Jenifer Tidwell

交互设计领域有不少优秀的理论书,而真正能从实践角度,把理论与实践结合起来,把交互设计从业者的经验系统化的书,恐怕仅此一本。

 

《Designing Visual Interfaces: Communication Oriented Techniques》 

 作者:Kevin Mullet

“解决问题,与用户沟通而不是个人表达,才是视觉设计和界面设计的关键。”

 

《Information Architecture for the World Wide Web (the Polar Bear book)》 Web信息架构:设计大型网站 

 作者:Louis Rosenfeld and Peter Morville

本书将设计学和建筑学的原理带入到数字领域中。解释清楚了一个问题——什么是信息架构。它是组织系统,标签系统,搜索系统,导航系统。

 

《Information Architecture: Blueprints for the Web》 

 作者:Christina Wodtke and Austin Govella

作者两位世界级信息架构与产品设计师——Wodtke现任LinkedIn的首席产品经理。曾在Yahoo!任高级设计总监;Govella曾在Comcast互动传媒和世界银行等机构任信息架构师,代表作品有著名视频网站Fancast.com。

 

《Designing Web Navigation》 网站导航设计 

 作者:James Kalbach

作者James Kalbach现就职于领先的法律与新闻资讯提供商LexisNexis,还是Boxes and Arrows(关于用户体验的著名在线期刊)的助理编辑,Information Architecture Institute的顾问委员会委员和European Information Architecture会议的筹委会委员。

 

《Web Form Design Web》 表单设计 

 作者:Luke Wroblewski

交互是互联网产品不可或缺的关键,而交互的入口必然是表单。

光实践不行,得为大家指出支持这些实践幕后的共通性的东西,这样才方便读者举一反三。

 

五、行动指南

《Usability Engineering》 可用性工程

 作者:Jakob Nielsen

本书系统地介绍可用性工程,被国际可用性工程界一致推崇为该领域的最佳入门书籍。

 

《Handbook of Usability Testing》 

 作者:Jeffrey Rubin and Dana Chisnell

这本书对方法论谈论更多,更引人深思,是初级设计师的最佳进阶读物。

 

《Observing the User Experience》 用户体验设计面面观 

 作者:Mike Kuniavsky

这本书向读者提供了丰富的信息。现在我们能够深入了解我们的用户:知道他们是谁,他们需要什么,他们怎么使用我们为他们提供的东西……

另外,听说中文版翻译不好。

 

六、文档类

《Communicating Design》 高效沟通设计之道

 作者:Dan Brown

本书主题讲设计沟通,价值在于针对不同流程、方法交付物提出了成体系里的实践结论。

 

《Set Phasers on Stun: And Other True Tales of Design, Technology, and Human Error》

 作者:S. M. Casey

本书向我们展示了设计师的基本设定、假设和极小的失误会给用户带来怎样灾难性的后果。

 

注:以上有中文译名的即为有中文译本。 

文章编译来源:http://view.inews.qq.com/a/20141213A0002C00