【UXlab】交互设计知识精选文章——每周一三五更新

uxlab

各位小伙伴，大家好！:loveliness: 我们是用户体验实验室（简称UXLab），成立于2012年，一直专注于信息产品创新设计、交互设计、信息服务设计、数字娱乐软件、交互技术等研究领域。力争做一流的交互设计、搭建一流的技术创新平台。

从今天起，我们会在贴吧里开辟我们的一栋楼，每周一、三、五会定期更新我们关于交互设计知识的分享，大家如果有什么意见或者想法请尽管提出，希望能和大家共同进步。

如果想了解更多关于UXlab或者交互设计的知识，可以关注我们的微信订阅号。文章欢迎转载~但是请先跟我们说并且一定要注明出处哦。:handshake



这就是我们微信公众号的二维码，大家可以扫一扫。

uxlab

【书山学径第4期】2014年移动端界面设计分析
来源：AnyForWeb UDC   
整理：树莓子

前几期小编介绍的来自书里的锦囊金句是否给了你一些设计的启发呢？今天带来的重磅干货，一定能让你在移动端产品开发的视觉设计中能更胸有成竹地做出漂亮的界面。

移动互联网时代的悄然袭来改变着我们的生活方式，因此有大批设计力量涌入了移动端的设计领域中，这也说明了大家越来越重视用户在各个设备终端层面的体验。在规划产品时，往往会把PC端和移动端的产品放在同等重要的地位进行思考。然而，设备的多样性和产品形态的多样性为设计师们带来的既是更多的发挥空间，也同样是更大的挑战。这些产品在设计之间有何不同？如何规划不同平台上产品的功能？设计时有哪些差异？2014移动端的界面设计是非常值得探讨的话题。

1.唯一主色调

2014年，追求极简设计风格，主色调可能只是选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，从而产生新的色彩，这样能够很好的表达界面层次、重要信息，并且展现良好的视觉效果。这样的页面看起来色彩统一，有层次感。当前上线的一些移动应用都采用极少的色彩，甚至放弃所有的颜色。仅仅用一个主色调就能展现良好的视觉效果。



2.多彩色风格设计

Metro引领的多彩色风格是与唯一主色调形成对照关系的设计风格，多彩撞色更多的表现于多种纯色块的使用，就是很简单的纯颜色，只需要注意多彩配色的方式，就能得到很好的视觉效果。多彩色拼接的设计风格，一屏式的页面排版布局，总体来说是时尚大气简洁的设计。“多彩撞色”的概念，在2014年手机端仍会继续发展。



3.信息框架扁平化

在设计的表现形式上我们追求界面扁平，注重通过弱化视觉效果来强化应用的功能。在移动设备上，过多的层级会使用户失去耐心而放弃对产品的使用。而且移动端上页面小，没太多地方摆多层的tabs导航或者面包屑导航，就只剩下左上角的一个“返回”按钮作为导航了，可以一次接一次的深入，但跳转了三、四次后，再看左上角的“返回”按钮，你已经很难判断出将会返回到哪里了。应该从信息架构角度，再进一步的去应用扁平化的设计理念，信息框架扁平化的目的是减少信息层级，追求信息到达用户的最短距离，从根本上解决上述问题。

扁平化思想是一种让设计者在界面设计过程中减少信息层级的思想。



4.动态数据可视化

数据可视化设计是将枯燥繁琐的列表和文字转换为直观的饼图、扇形图、折线型、柱状图等丰富直观的设计元素，提高用户体验。而且现今数据可视化不只是静态展现数据，用户希望通过互动及时获取数据流，若以动态效果来呈现，能多维度呈现给用户实时信息，同时能与用户形成互动，提高数据表现的趣味性。动态数据可视化将更加强调数据转译实时更新的图形，以及动态的图形化表达。



5.移动端的视差效果

视差滚动是时下比较热门的网页设计技术，通过让多层背景以不同的速度移动来形成立体的运动视差效果，虽然纯属视觉效果，但不可否认在内容滚动时形成的视觉体验非常出色！视差效果在网站中的应用并不少见，若在移动应用中，是否也能运用一些精细的视差效果，为用户带来全新的视觉体验。当用户在倾斜和移动屏幕时，视差能让用户在屏幕上看到如3D一样的视觉效果，带来非常出色的感官体验。



6.分层结构

分层结构是通过动效扩展了屏幕空间，渲染出带有纵深感的层次，将操作区和内容区划分开，培养用户使用习惯，使人印象深刻，达到意想不到的效果。这种设计更专注于内容，更多的暴露信息，减少结构层级，操作高效。



7.迎合用户的使用习惯

迎合用户的使用习惯，主要为了让用户在操作中简单到极致。用户不喜欢经常重复性输入一些信息，如个人账号，安全信息，操作习惯，下次操作行为等，这些占用了用户完成其他重要任务的时间。尽量减少用户的输入，并且用户在输入时可以给出适当的参考。

根据用户的行为习惯，对移动应用的整体布局进行重新策划，使得简单、简单、再简单、简单到极致，通过清晰的流程和界面，让用户减少对应用的思考以及寻找的时间；让准确的色彩和表述减少用户心理斗争的时间。



8.提供明确的导航

导航在移动界面设计中是至关重要的，导航的主要作用在于：告诉用户，我在哪？我去过哪？我可以去哪？我怎么去哪？我去哪能干什么？等等，这些都是导航的作用。明确的导航设计，可以增强用户的体验，让用户直接在主界面就可以看到对应子界面中的信息，减少用户盲目的操作。在任何地点都能回到主界面或退出应用，因此导航上的每个操作对用户来说应是符合逻辑的，用户能够较容易了解它要表达的信息与情感。




9.主操作栏的内容不易过多，一般不超过三项

主操作栏的作用是为了把最重要的内容展示给用户，过多的内容会对用户造成干扰。因此简洁的主操作栏便于用户的使用和了解，并且减少用户发生错误选择的可能性。操作栏上的操作按钮一般用来展示最重要、常用，而且频繁使用的功能操作，比如移动端界面左上角的返回按钮。



10.以用户为中心

用户总是按照他们自己的方法理解和使用移动端，所以从用户的观点考虑，想用户所想，做用户所做成了设计师们的设计考量标准之一。比如用户在没联网的情况下发送信息或发表评论，相应的内容会自动保存在手机端，联网后只需重新发送即可，不需要重新输入内容。



11.合理的用户引导

由于手机界面的承载能力有限，产品功能的不断膨胀，必须要在用户打开应用之后告知他某些新奇的功能，引导他完成某些主要任务流程，帮助用户快速掌握应用的使用方法，让用户快速体验到应用的乐趣，激起用户对功能的尝试欲望。引导语句必须简短，聚焦在最重要的任务上，减少用户的思考时间，让用户不至于迷失在陌生应用中不知所措。同时也要避免接连不断的展示引导信息，这样不仅会产生短期加重记忆方面的问题，而且会让新用户觉得你的应用过于复杂，望而生畏。



12.拟真动态

将现实中的运动现象简化抽象,形成了移动端中一些蛮有特色的动画效果。比如天气应用中，全屏的气象动画优雅而逼真，洋洋洒洒的雪粒、悠然飘浮的云朵、划破天际的闪电传达出一种独特的表现力，给用户更完整,更真实以及更具趣味的感官体验。



13.尽量使用图形元素

众所周知，图形相较于文字更易于记忆和了解。最合理的方式是：“恰当的图形元素+简短的文字”，并整合到一个展示层面上，这种方式既有利于用户阅读，也可以使多步骤的流程更直观、易懂、易记忆。采用的图形尽量简单易懂，形象具体。避免让人产生歧义的图标，因为这样反而会误导用户，损失设计交互体验。比如圆形是最容易让人觉得舒服的形状，尤其是在充满各种方框的手机屏幕内，增加一些圆润的形状点缀，立刻就会增加活泼的气息，徒增好感。移动界面运用圆形选项按钮来设计，让选择变得专注而明确，又不刻板老套。



总结：移动端的设计根据不同产品的战略和具体情境，设计要进行灵活变化。其提倡的核心原则就是从用户出发，充分考虑用户的使用体验。本文对移动端界面设计进行粗浅的分析，希望给大家带来一些思考和帮助，有不足之处欢迎指正，也与诸君共勉。本文最初由Anyforweb UDC中心发布，需要浏览更多或了解网站建设及web应用相关信息，请访问anyforweb.com。Anyforweb会继续为大家分享WEB设计思维和案例。
--------------------我是华丽的分割线--------------------

看完这篇文章是不是对用户体验有了些小了解了呢？想深入了解交互设计、信息服务设计、数字娱乐软件等内容的有痣青年，赶快关注UXlab订阅号，开始系统的课程学习吧。

本文版权属于同济大学UXlab和中山大学DMRC所有
        搜索订阅号：UXlab

◈吐槽请留言，么么哒。

uxlab

【工匠学堂第5期】形成性可用性评估
作者：小肥城

可用性测试从产品的生产周期来看，可以分为形成性可用性评估和总结性可用性评估。本期将为大家详细介绍关于形成性可用性评估的特点和方法。

从测试的时机来说，时机形成性评估是在设计完成之前进行，总结性是完成之后进行的。虽然说两种评估在产品设计、实现和测试整个开发流程中都起着重要作用，但是它们的侧重点完全是不一样的。

形成性可用性评估越早进行效果越好，用于获得用户对产品或服务的反馈意见。在评估过程中，尽可能地发现可用性问题，然后提出改进意见。如果有必要，可能会重复进行多次形成性可用性评估。这个测试的优势在于它可以反复进行测试改进，知道用户满意或者达到设计者的预期目标。

我们拿做料理打比方，形成性测试是从选择食材就已经开始进行了，而总结性测试则是料理做成之后才开始的。这么早开始的好处在于，比如食材不符口味可以立即更换，调料味道不足可以增大用量诸如此类。能够用比较的低的成本最大限度地提升料理的受众喜爱度，在产品设计这块来说就是软件的可用性。

评价料理好不好，用户体验至为重要（吃的东西都是这样）。很多东西都不例外，比如说一个礼拜前阿里巴巴悄然上线的支付宝“信任宝”，让许多用户觉得“不可思议”。

该服务的描述是“最长 38 天免息期，根据网购信用为您专属定制，付款快如闪电，更有多重保障，护卫资金安全”。据南方都市报的报道，“信任宝”在支付宝钱包中只存在了很短一段时间。支付宝员工称这项服务仅供内部测试，不对外公开。这是很明显的形成性评估案例，阿里巴巴对虚拟信用卡业务的探索至少已经有一年多的时间。虽说信用支付难以“出生”的主要原因在于政策监管，银行业内部对于是否应该禁止虚拟信用卡和扫码支付也有争论。但是平台这边做好用户体验调查改进，更是一种基础的需求和前提。

不仅在支付宝这样做，在阿里巴巴推出此“内部测试”的同一天（7月1日），天猫推出了分期付款业务“分期购”，用户在部分商家购买产品可以选择分 3、6 或者 9 期付款，零首付。在被央行叫停虚拟信用卡业务之后，阿里巴巴并没有停止关于信用支付的准备工作，
而是一直都有往虚拟支付这块走的打算。

形成性可用性评估的目的是收集定性数据，即对可用性问题发生的状况及原因做定性的调查，查找出错的原因，然后改进产品设计。具体测试的时候不在乎一些定量精确的数据统计，而是用户整体上的一个感官体验。

根据问题设计测试流程，形成性评估大部分是内部进行的开发期测试，一般不会对外公开数据和预期进展。因为它是产品前期的模糊预测，同时还存在对产品进行大刀阔斧改动的可能。虽然它默默无闻，但是却可以给产品带来良好的质量保证。这，就是形成性可用性评估。

--------------------我是华丽的分割线--------------------

看完这篇文章是不是对用户体验有了些小了解了呢？想深入了解交互设计、信息服务设计、数字娱乐软件等内容的有痣青年，赶快关注UXlab订阅号，开始系统的课程学习吧。

本文版权属于同济大学UXlab和中山大学DMRC所有

        搜索订阅号：UXlab

◈吐槽请留言，么么哒。

uxlab

【书山学径第5期】给入门者的UI设计图书
作者：小苹果

没有规矩，不成方圆。对于UI设计来说也是一样，也有一些设计师在设计的过程中需要遵守的准则。UI设计准则，即用户界面设计准则，是人们在长期的实践中总结出来的规律。很多行业专家都提出过一套属于自己的准则，例如Norman、Johnson、Shneiderman等，本期的书山学径就要来推荐一下由Johnson编写的《认知与设计：理解UI设计准则》一书，它是一本适用于初学者的介绍UI设计准则的书。

首先介绍一下本书的作者，Jeff Johnson，是UI设计领域的大师，拥有耶鲁大学及斯坦福大学的心理学学位，同时也是GUI（图形用户界面，Graphical User Interface）设计的先驱。

在介绍书的详细内容前，我们需要先了解一下以用户为中心的设计。这种说法相信小伙伴们都不陌生，什么是以用户为中心的设计？即在进行产品设计时，从用户的需求和用户的感受出发，围绕用户为中心设计产品。简单地说，就是站在用户的角度去设计产品，让产品去适应用户，而不是用户去适应产品。


《认知与设计：理解UI设计准则》就是从用户的角度出发，向各位读者介绍了一些作者经过实践总结出来的设计准则。从用户的心理、思考的习惯、阅读的习惯、对颜色图形的感知等围绕着用户的各个方面出发，向读者介绍怎样的UI设计对用户来说是有良好的体验的。特别是对于入门者来说，本书有几个好处：

1、书里面的内容浅显易懂，且结合了很多案例用以说明理论知识，方便读者理解；

2、书中的理论知识是围绕着用户展开的，即使你不是什么交互设计的高手，你也能站在用户的角度轻易地去理解它；

3、书里面的内容图文并茂，很方便读者阅读；

4、本书的最后还附有其他较为有名的设计准则，可以用作参考。

技术，特别是计算机技术，一直都在迅速的发展。就算是UI设计方面，它也有自己的流行趋势，从以前的立体的设计，到现在扁平化设计。虽然看起来相差很多，但是无论怎么变化，他们还是有必须遵循的准则，例如在《认知与设计：理解UI设计准则》一书中，作者提出的准则。因为这些准则都是从用户体验出发提出的准则，而无论技术如何变化，人们如何感知、学习和思考的基本知识变化并不快，因此，我们不必因为行业信息的不断更新，而担心自己获得的知识已经过时，反而，通过这本书的学习，还能帮助你更好的学习和理解其他的设计准则。
--------------------------------------------------------------------------------------------

想深入了解可用性测试、软件开发设计、数字娱乐软件等内容的小伙伴，赶快关注UXLAB服务号，开始系统的课程学习吧。

本文版权属于同济大学UXlab和中山大学DMRC所有
       搜索订阅号：UXlab


◈吐槽请留言，么么哒。

uxlab

零基础零Practice教你弹奏欢乐颂

从来没有摸过琴键？不认识五线谱？没有时间练习？这些都不是问题，带上这副智能手套，不需一会儿你就能流畅弹奏一首欢乐颂啦。

这个手套看起来普普通通，但是每一个指套里面都缝着一个小小的振动器，就像给每个手指戴了一个小戒指。这些小振动器事先经过程序编译，工作的时候会有节奏的振动，你的手指便会跟着敲击。手套“教”你学曲子的期间你可以做任何事情，和朋友聊天，看一会儿电视等等，只要带着个手套就行啦。使用一段时间后摘下手套，再次抚摸琴键时，在适当引导下便会“不由自主”的弹起刚才手套“教”给你的曲子，几次训练之后就会异常熟练，玩转演奏啦。

这个手套是由美国乔治亚理工的研究者研制的，目前还在进一步的研究中，小编不禁这样想，不知道未来它能不能教我弹奏更复杂一点的曲子呢？让我这样的懒人可以成功弹奏一曲。或者将该设备运用到腿上，让我学会跳舞哈。但是不管怎样，这个智能的手套都是一个不错的创意呢。--------我是华丽的分割线--------

看完这篇文章是不是对用户体验有了些小了解了呢？想深入了解交互设计、信息服务设计、数字娱乐软件等内容的有痣青年，赶快关注UXlab订阅号，开始系统的课程学习吧。


本文版权属于同济大学UXlab和中山大学DMRC所有

搜索订阅号：UXlab

◈吐槽请留言，么么哒。

uxlab

【工匠课堂第7期】携程：一个内容复杂，架构清晰的网站？
作者：金钱豹





各位小伙伴需要经常坐灰机么？会经常上去哪儿、携程这些网站订票么？如果有的话，你应该就会更理解我今天要讲的内容。小编最近闲来无事就上上携程、去哪儿这些网站，查查机票，对比对比价格，感觉也是别有一番乐趣。也因为最近逛这些网站比较多，所以打算今天忠实于自己的本职，分析分析携程的信息架构啦。

携程，众所周知，一个在线票务服务公司，围绕着旅游，为广大用户提供酒店预订、机票预订、独家预订等功能。要提供这么多的功能，要如何设计网站的信息架构，才能保证用户能在网站中快速找到自己想要找的信息呢？下面我们就来细细分析一下。


分析网站内容

内容分析有几个步骤：

1、首先知道自己有什么

2、然后思考网站需要的东西

3、与小组成员讨论

4、最后细化内容并设置优先级。

我们一个个来看，首先携程的目的很明显，为出门旅游的用户提供便利；如何提供便利？订票，订酒店，景点旅游路线推荐；哪些内容是比较重要的？订机票、订酒店。

这样一轮下来，似乎就比较清楚了，网站的内容以订机票、预订酒店为主，同时向用户推荐旅游信息。
确定内容细节

这一部分包括内容下的具体分类，需要周期更新的内容的更新周期确定，以及不同内容面向的受众确定等，简而言之，就是对上一步确定的内容再细化。

选择内容分类方案

内容的分类方案有很多种，准确的方案有按时间、按字母、按地理、按格式和按组织结构；模糊的方案有按任务、按受众和按主题/话题。当然也可以互相结合。

那么对于携程这种内容比较丰富的网站来说，什么样的内容分类方案比较适合呢？在小编看来，携程网的内容分类方案是组合方案，大范围的内容按主题/话题分类，局部的内容有的按地理位置分类，有的按主题分类。
选择网站的信息架构

网站的信息架构有简单的层级结构、数据库模式、超链接模式和线性模式，也有复杂的“简单等级+简单数据库”模式、目录模式、中心辐射型、子站、几种入口点和标签。在小编看来，携程用的就是集中入口点的模式，由于不能以一种单一的方式组织内容满足所有的用户，因此，首先根据内容和核心用户确定一个实用于该网站的信息架构，然后，给其他用户气功一些不必要覆盖全网站的入口，整个网站架构专注于核心信息即可。



选择导航类型

导航不是简单的一个条形，它是一个完整的系统，链接了不同的模块和不同的需求。它有核心导航：横向导航、纵向导航、倒L导航、选项卡导航、下拉式导航、弹出式导航、整页导航、页内导航、上下文链接和相关链接，也有其他导航，例如面包屑、标签云、网站地图、页脚、索引和过滤器。

在携程网站中，我们就可以很清楚的看到用到了下拉式导航、面包屑和过滤器这几种导航形式。

这样分析之后，有比较了解携程网的信息架构么？


--------我是华丽的分割线--------

看完这篇文章是不是对用户体验有了些小了解了呢？想深入了解交互设计、信息服务设计、数字娱乐软件等内容的有痣青年，赶快关注UXlab订阅号，开始系统的课程学习吧。


本文版权属于同济大学UXlab和中山大学DMRC所有

搜索订阅号：UXlab

◈吐槽请留言，么么哒。