带你读《好设计,有方法:我们在搜狐做产品体验设计》之三:区分不同载体的设计

简介: 那些激动人心、让人拍手叫好的设计,到底有没有方法可循?背后到底有没有设计理论支撑?答案是肯定的!本书作者是资深体验设计专家,拥有超过10年的产品体验设计和团队管理经验,他们将试图为大家总结和揭示那些优秀设计背后的理论和方法。

点击查看第一章
点击查看第二章

第3章 区分不同载体的设计

◎陈昕冉
回顾互联网的发展史,可以发现承载人们上网的工具在不同时间有着不同的变化。从台式电脑到手机,从WAP页到App端,随着载体的变化,设计的规范也在不断改变。起初人们用电脑来上网,Web端的设计载体就是PC电脑,设计规范就需要满足PC电脑的操作规范。后来手机成为我们生活中不可缺少的一部分,它承载着WAP页面,在手机浏览器中为我们呈现精彩的内容。WAP页就需要按照手机端中浏览器的规范来进行设计。之后App改变了大家的生活方式,人们在移动端拥有了更多操作方式,我们的设计也要伴随着交互手势的丰富而做出改变。

3.1 iOS和Android之间的差异

随着智能手机的飞速发展,移动端市场的分化开始逐渐清晰。iOS和Android两大应用系统迅速崛起并瓜分了智能手机市场。然而iOS和Android两个系统的设计规范也不尽相同,在设计界面时也要进行相应的调整。
作为设计师要看到两大系统之间表面上的差异,还要了解它们在设计中的本质区别,这样才能做出符合用户习惯的设计,满足用户的需求。
Android的Material Design设计规范遵循了物理原则,所有交互都是建立在现实生活的基础上,可以轻松地被用户接受。用户的学习成本相对会低,操作性强。例如在手机屏幕中点击界面元素会伴随着水波纹扩散的动画效果,就像是现实中手指触碰水面一样。这种写实的设计效果在一定程度上可以降低用户的学习成本,同时使产品看上去更加细腻。

image.png

iOS则在动效处理上本着简洁的原则,认为过于细腻的动画会分散用户的注意力,所以iOS的设计更多是聚焦在运用镜头和景深的切换来过渡用户的操作。每当用户从桌面打开一个App,镜头就会逐渐拉近,而背景则是隐入了一片毛玻璃效果之中,这个交互过程是瞬间性的,所以很少有用户会察觉到。在景深切换的同时还伴随着镜头的切换(从桌面到打开App的首页),可以称得上是iOS设计风格中的经典案例了。

image.png

Android和iOS系统之间存在的差异会影响我们的设计。在设计中我们需要考虑到不同的系统有不同的体验设计。如果生硬地将iOS系统的体验设计应用于Android系统中,往往会显得格格不入,还牺牲了Android用户的使用体验。我们从以下几个方面归纳了两系统之间的差异,以期许可以抛砖引玉,帮助大家做更好的设计。

3.2 设计风格的差异

1.阴影的定义
一提起Material Design,大家应该都不会陌生。在Material Design的中文指南中,Material一词被翻译为“材料”。这个名字刚开始可能会让人一头雾水,没有人知道这种“材料”在真实世界中以哪种状态存在、由哪种物质组成。它是一种为了适合触摸屏而被发现和设计出来的一种新材料,被赋予可以承载信息、交换信息的功能。设计师们发现现实中的纸张更符合Material Design中对于“材料”的定义。这使Material Design设计风格在最初就遵循了物理世界的原则,在设计中会出现符合现实世界的场景设计,例如界面中的模块会有阴影,像现实世界中所有物品都有影子一样。并且纸张的物理属性也被Material Design转移到了屏幕中,衍生出在虚拟世界的纸张控件:卡片cards和纸片chips
在Material Design规范中,软件系统中各种功能是分层级展现在手机屏幕上的。这种形式在规范中被定义为:阶层。即两个z-坐标(深度)不同的元素会产生部分重叠,从而形成了阶层。此时两个材料的移动是相互独立的,通过控制界面中元素的Z轴数值(阴影的大小)来反映其海拔高度(层级重要性),Z轴数值越高,元素离界面最底层越远,投影就会越重。如下图1为官方设计指南中给出的界面元素层级关系,图2为Z值的大小样式,Z值越大,层级越高。图3为实例应用中展现给我们的界面,通过阴影来区分元素之间的距离(Z轴值)。

image.png
image.png

在iOS的设计规范中有三大特点使其风格区别于其他平台:清晰(Clarity)、遵从(Deference)和深度(Depth)。其中遵从原则可以简单解释为遵从内容至上原则,所有的设计都是为了来突出内容。设计师们要减少使用边框、渐变、阴影的频率,让界面尽可能地轻量化、扁平化。正因如此,iOS的设计更适合称为Flat Design,即扁平化设计。所谓扁平化设计,就是在设计的过程中,去除所有具有三维突出效果风格和属性的元素。这种风格可以让设计更具有现代感,同时可以强有力地突出设计中最为重要的部分:内容和信息
如果把Flat Design的设计用Material Design中的概念来表达,我们可以理解为iOS中界面更趋向于所有元素的Z轴(深度)数值保持统一。必要时设计师可以利用阴影来对某一元素进行突出,但这与Material Design设计中的阴影概念并不完全相同,Flat Design中的阴影更适合被理解为一种设计的表现手法,而非风格。例如受到众多设计师追捧的弥散阴影。
综上所述,我们了解到Android系统中Material Design设计是遵循物理世界原则的,元素是以材料的形式出现在屏幕中,产生真实世界的投影(三维效果)。不同的元素间会产生重叠,形成层级。
iOS扁平化(Flat Design)设计不包含所有具有三维突出效果和属性的元素,一切以内容为主导,阴影只是一种设计表现手法,并不是必要存在的。

image.png

2.空间的规则
上述我们说到Material Design是以“?材料?”的形式出现的,而材料本身会有一些不可改变的特征和固定的行为。材料在X轴和Y轴上的长短没有固定,但是有一致的厚度。内容会独立呈现在材料的表面且不超过材料的边界。由于材料是固体的,所以材料之间是不可以相互穿透的。多个材料同时出现在相同位置时,必须要利用阴影来区分材料的层级(如下图)。

image.png

而在iOS设计中,半透明、毛玻璃风格是它最明显的设计特点。在同一个界面中出现不同的元素时,只需要通过叠加一层半透明遮罩或加入毛玻璃风格来传递给用户“层”的概念。这与Material Design中给予材料的属性大相径庭。除此之外,在展示内容的区域方面Material Design与iOS的规定也有所不同,在iOS中不会要求内容被限定在“材料”范围中,相反许多设计师会为了突出内容,刻意让信息超出边界以此来吸引到用户注意(如下图)。

image.png

Material Design中的材料遵循物理规律,因此材料之间无法穿透。多个材料同时出现时,必须用阴影来区分材料的层级关系。内容与材料相对独立但内容的范围不能超过材料的边界。
iOS中设计元素之间可以互相穿透,设计师可以运用半透明遮罩层或者毛玻璃效果的叠加来区分元素之间的层级关系。内容的范围没有限制,必要时还可以为了突出信息,将元素摆放到超出边界的位置,以吸引用户的关注。
3.颜色的选择
Material Design有一套自己完整的配色方案。配色灵感来源于大胆色调与柔和环境的对比及阴影与高光的对比,其画板中囊括的基础色的饱和度为500。高饱和度的颜色能使设计显得更有张力,更具有吸引力。Material Design也十分鼓励设计师大胆运用对比色来强调界面中的信息和内容。当你还没有决定自己的品牌色时,可以从Material Design主要色板中最多挑选三种色调,然后从次要色板中选择一个强调色。

image.png

iOS在设计规范中并没有对颜色有一个明确的定义(这里具体指制定色板),只是把系统的配色公布给设计师们参考,并鼓励大家根据自己的想法指定相应的配色方案(如下图)。

image.png

iOS虽然希望设计师根据自身产品的性质制定色板,但是它也提醒了设计师要选择舒适细腻的配色方案,即在选择一种主色后,确保其他颜色不会与之发生冲突。如iOS系统中自带日历的配色以红色为基准色,每个组件、界面都是红色的,当然界面中就不会出现红色的对比色。

image.png

同时在iOS设计规范中关于颜色还提及了一点:要关注到色盲用户,避免仅仅使用红绿或者橙蓝等颜色组合来区分两个状态或者值。

image.png

Material Design希望通过颜色来强调组件的重要性,尤其是按钮、开关等关键组件。它提倡设计师们大胆运用鲜明的颜色来凸显视觉张力。为此Material Design还提供了一系列色板,在你还没有决定好配色方案的时候,Material Design色板是个不错的选择。
iOS则没有向大家提供色板,仅仅是提供了系统界面的配色方案,同时鼓励设计师选择符合自身产品风格的配色,为用户展现细致温柔质感的界面。不推荐大量应用对比色来凸显内容。

3.3 控件的6个差异

在iOS和Android的设计指南中都分别单独提到了布局结构及组件的介绍和规范。了解这些内容有助于我们在设计过程中做出更好的决策。
1.状态栏对比
Android的状态栏(也成为系统栏)高度为24dp,信息对齐方式为右对齐,栏内包含了通知图标和系统图标等内容。默认情况下,状态栏的颜色都是在背景颜色的基础上加一层深色的遮罩,但也可以使用界面中其他元素的颜色,或者设计成半透明效果。

image.png

iOS的状态栏设置在屏幕的上边缘,栏内包含有关设备当前状态的信息,如时间、蜂窝电话、网络状态和电池电量等,状态栏高度为40px。在默认情况下状态栏的背景为透明色,文本颜色则根据应用程序来调整,通常分为深色和浅色。

image.png

2.顶部导航栏对比
在MD设计规范中Android的顶部导航栏被称为应用栏,是一种特殊的工具栏,主要用来做品牌展示、页面导航、搜索以及其他操作。
左侧的导航图标可以控制导航开启与关闭,当页面不需要导航的时候也可以省略(如下图)。右侧的按钮则是一些与应用相关的操作,例如帮助、设置等。Android的顶部导航栏默认高度为56dp,遇到需要扩展内容的情况时,顶部导航栏的高度数值则为默认高度加上内容增量高度的总和。

image.png

这里需要向大家单独介绍的一点是:安卓的返回按钮(全局返回)和向上按钮是有区别的。返回按钮(全局返回)一般设置在屏幕底部虚拟导航栏的左侧。返回按钮(全局返回)的返回路径是按照用户浏览的顺序来设定的,向上按钮则是按照页面的逻辑层次依次返回。如果之前的屏幕就是逻辑层次的上一层,那么“返回”和“向上”的操作结果是一样的,否则两个按钮返回的页面将会不同。另外,返回按钮(全局返回)可能回到“主屏幕”或者其他的应用,而“向上”按钮回到的界面总是在你的应用中,连续点击向上按钮两次才可以退出应用。

image.png

iOS导航栏的默认高度为88px,且高度不可变。一般来说,导航栏上应该最多不超过以下三个元素:当前视图的标题、返回按钮和一个针对当前的操作控件,如编辑按钮、完成按钮等。默认状态下导航栏背景会处理为轻微半透明效果,当应用需要时,导航栏背景也可以填充为纯色、渐变色或者自定义位图。

image.png

在设计样式方面,Android的导航栏高度为56dp,高度可以根据内容变化,iOS的导航栏高度固定为88px。两系统在返回键的设计样式上也有所不同。Android的返回按钮更像是一个箭头,而iOS则是用“<”代表了返回箭头。iOS按照用户浏览历史顺序来进行返回操作,Android则是根据应用的逻辑层次来进行操作。
在二级页面中,顶部导航栏的样式还会出现以下情况:包含分段控件(Android以标签形式出现)和搜索框(与搜索栏不同,搜索栏不包含管理当前页面的控件)的样式。
导航栏中的分段控件用来展示应用层级相同的界面,不过Android与iOS的设计在视觉方面略有差异。

image.png

内容排版方面,Android把页面标题放置在导航栏左边,部分Android产品会选择在向上按钮右边放App的logo,强调了品牌的概念,而iOS是将页面标题设置为居中对齐。iOS会在返回按钮旁边显示上一级名称,使用户再点击返回时有明确的心理预期。不过由于用户已经熟悉iOS的操作习惯,市面上现在大部分App已经不显示上一级标题了。
3.搜索栏对比
搜索这个功能在绝大多数App中都会出现,用户可以通过搜索快速定位应用中的内容。
MD设计规范给出两种搜索样式:固定显示搜索和可展开式搜索。固定显示搜索更加强化了搜索模块,鼓励用户进行点击操作。而可展开式搜索在一定程度上弱化了搜索模块。两种模式的搜索在功能上并无什么差异。

image.png

苹果在搜索栏设计上建议包含默认提示词、清除按钮和取消按钮。iOS11规范允许用户通过在搜索栏输入大量字段来进行搜索。搜索栏可以单独显示,也可以嵌入在导航栏或者内容视图中显示。到搜索栏的位置在导航栏中时,搜索栏可以选择被一直固定在视图顶部,以方便用户可以随时访问,也可以折叠,当用户需要时再显示。

image.png

在应用市场中,很多App会将Android和iOS搜索栏样式融合,在多数搜索需求很高的页面中我们可以见到两个系统都有搜索框被嵌入在顶部导航栏中的情况。这样设计其实是为了便于用户快速操作。笔者认为这是设计师们在思考过程中融合两系统规范得到的结果。所以两个系统在搜索栏的样式选择上并没有一个明确的区分,大家可以酌情选择不同样式的搜索栏。
4.底部导航栏对比
底部导航栏在iOS的系统中通常被设置为全局导航,用户可以点击不同的标签来快速切换模块。在早些时候,因为Android底部有物理按键,为了降低用户误操作频率,多数Android应用会选择将全局导航放在界面顶部。但是随着屏幕尺寸不断增加,用户单手操作触及到界面顶部的成本越来越高,很多Android产品又将全局导航移到了底部。
在MD规范中底部导航分为等宽(宽度不可变)和可变两种形式。导航中的文字应简洁,避免出现折行的情况。底部导航数量最少为三个,最多为五个,当导航数量少于三个时,建议改用标签导航的形式。

image.png

iOS底部导航与上面Android导航在呈现方式上没有太大的区别,但是在iOS规范中提出了几点需要注意:

  • 当导航栏某个选项不可用时,不要设计为置灰按钮,只需在用户点击不可用选项时,告知用户当前页面为空(即空状态)。
  • 导航栏图标应该在视觉上保持一致和平衡。
  • iPhone上最大导航数为5个,超过5个时,最后一个导航将会以“更多标签”代替。
  • iOS导航栏可以使用肩标来提示信息数量。
  • 底部导航栏和工具栏不可同时出现。

    image.png

5.弹窗(警告框)对比
弹窗用于提示用户做一些决定,或者给予用户一些额外的信息。在MD规范中,一个弹窗包含这三部分:标题、内容和事件。各组件之间的距离如下图。

image.png

弹窗的内容形式并不局限在文本,其他UI元素也可以构成提示框的内容。

image.png

在iOS设计规范中,弹窗需要包含标题和按钮,根据用户使用场景可以添加描述信息和输入框。同时苹果强调要尽量减少使用弹窗的频率,这样才可以有效引起用户足够的认识。

image.png

6.动效对比
优秀产品的共同特点是:帮助用户更好地聚焦到重点信息,理解层级、转场关系。Android和iOS的动效从最根本的模型上来说是截然不同的,Android的Material Design设计规范遵循现实世界的规律,而iOS则是将更多动效建立在镜头的移动和景深的变化中。
MD规范中最经典的动效之一就是水波动效,用户点击列表后界面会泛起“涟漪”作为一个反馈。

image.png

MD规范中将交互分为了四类,分别是真实的动作、响应式交互、转场交互和情感化交互设计
真实的动作就是在设计动效时,我们需要考虑界面中元素的真实特性,真实世界中的物体拥有质量,所以只有在施加外力的时候它们才会移动,例如球掉在地上会不断地弹起落下,最后慢慢停落到地面上。MD规范中认为动效需要符合自然规律,这样才不会让用户感到意外和干扰。
响应式交互就是针对用户的操作及时给予反馈,由此来提升用户的使用感。表层响应(水波纹效果)、元素响应(点赞效果)、径向响应(改变列表顺序)都是常见的响应式交互。
转场动画即应用元素从A点到B点的转变过程,转场动画可以在多步操作过程中有效地引导用户,避免版面的变化给用户造成困扰。在建立转场动画的过程中,对于元素的移动需要严格考究,需要在确保动画平滑不脱节的情况下,使信息有层次的展现。
情感化交互设计更多体现在元素的细节上,通过细小图标的动画来吸引用户,启发用户产生共鸣。
由于iOS趋于精简,苹果手机没有实体返回键只有一个home键,使iOS和Android在交互设计方面有较大的不同。最明显的差异就是层级返回和编辑选择这两种操作了。
由于只有一个实体home键,iOS的界面中本身是包含返回按钮的,而实体键只负责退出应用。对比Android来说,因为机身包含物理返回键和虚拟返回键,所以操作逻辑与iOS不同。当界面为应用首页时,点击实体返回键(既上述所提到的全局返回按钮)可以直接退出应用。而虚拟返回键一般是存在于应用中,点击后是返回上一步操作,并不会直接退出应用。关于Android的实体返回键和虚拟返回键关系可以用下图表示:

image.png

在编辑选择操作方面,iOS给出了明确的操作入口,一般情况都会将编辑按钮放置在导航栏的右侧,进入编辑模式之后可以多选(点击)或者单选(滑动删除)。但是安卓进入编辑模式是通过手指长按来触发,同时配合工具栏的选项进行编辑。
在触发多任务功能方面,两系统也有所不同。iOS设定轻按home键两次,后台的程序会被挂起,左右滑动可以查看所有后台程序,上滑可以删除后台程序,点击可以进入其中一个应用。Android的多任务切换方式被赋予在一个虚拟的按键中,轻触两次多任务按键,系统会切换到上一个应用,长按多任务按键,会将当前后台所有应用以分屏方式显示。

image.png

在及时反馈动效方面,iOS采用了高亮提示,即手指轻触按钮时,按钮会通过明暗变化来反馈用户的操作。但是iOS并没有具体限定反馈动效的视觉呈现,大家可以根据自身产品进行调整。
以上为笔者从设计风格、界面元素和交互设计三方面浅析iOS与Android的平台差异,上述案例多以系统为使用场景来进行对比,熟知iOS和Android设计规范能让我们在设计时更有根据性,更加得心应手。但用户的使用场景千变万化,设计师在设计时也要考虑融入更多情景,做更加人性化的设计。

3.4 WAP和App之间的差异

根据《中国互联网络发展状况统计报告》显示,截至2017年6月,中国网民规模达到7.51亿,占全球网民总数的五分之一。其中手机网民占96.3%,各类手机应用的用户群体规模不断扩大,使用场景也越来越丰富。WAP和App都是以移动端作为载体,它们设计上的差异又很细微,很多App的开发不会纯粹地用Native来开发,而是融入WAP页面,这样会便于更好地更新和分享。这是需要根据产品模块需求的差异来定制的,双端的工程师们趋向于用Native来开发,因为体验更好。WAP是寄生于平台之上,融合在App中,所以会更多地跟随产品的体验来设计,绝大部分WAP页面都是依附在浏览器之中,进而也会受制于浏览器的体验设计。那么WAP和App之间比较明显的差异都有哪些呢?笔者总结了以下几点:

image.png

3.4.1 屏幕尺寸的差异

WAP页面的内容展示区域更小,浏览器自带的导航条会占据一定的屏幕空间。这时就需要用户频繁的滚动来获取内容。

image.png

在《贴心设计:打造高可用性的移动产品》中提到:“移动设备的屏幕要小得多。这种如同透过门缝进行的阅读增加了认知的负担。人脑的短期记忆是不稳定的,用户在滚动屏幕的过程中需要临时记忆的信息越多,他们的表现就会越差。”因为WAP端的有效屏幕空间确实太小,所以WAP页面在视觉方面相比App应该更加精简,在图片方面也同样偏向于缩小图片以节省空间,以达到在小空间内尽可能展现更多有用的信息给用户的目标。
下图为淘宝App与WAP端的截图,我们可以发现WAP端浏览器自带的导航栏占据了一定屏幕尺寸,使页面布局在整体上显得更加紧凑。WAP端的搜索栏高度也比App端矮了不少,在内容方面,去掉了“热搜”和“我的频道”模块,省略了下方占用空间较大的双十一活动入口,只保留了顶部滚动banner。宫格模块中采用了文字+产品信息图的模式,与App端相比更加简洁。

image.png

3.4.2 有效操作的设计差异

在浏览WAP页面时,应用自带的导航常常不明显。随着用户滑动屏幕,导航就会自动消失。如果照搬App的设计,会出现找不到导航的情况,让用户迷失方向,产生困惑。针对有效导航不明显的问题,许多应用会把导航设计为悬浮状态,跟随页面滚动,或者直接将导航固定在顶部栏内部。

image.png

页面中应当尽可能避免除导航以外的信息以float浮层的形式出现,否则容易出现与导航叠加的现象,导致界面功能混乱。有时App主要交互方式也会以float浮层的形式固定在界面右下角。

image.png

另外我们知道,WAP页面依附于浏览器中,且对于网络状态的要求很高,当手机网络不佳的时候,在WAP上的各种操作将会变得延迟和卡顿。频繁的输入、3D特效在WAP页面上都不能给用户带来很好的体验。但是App可以在无网络状态启动,访问本地资源,运行的速度也更快,页面之间可以做到无缝切换,整个流程都非常顺滑。

3.4.3 设计像素的差别

我们使用的手机中80%的分辨率都是以2.0为密度的。设计稿也应该以市场占比高的屏幕尺寸为基准来设计。举几个常见的尺寸:640×960、640×1136、720×1280,在WAP设计时,640×1136是最为合适的尺寸。因为当WAP设计稿设计为常用的750×1334尺寸时,在640×720的屏幕中会导致界面过宽而出现横向滚动条的情况,造成不好的使用体验。而设计成640×1136尺寸时,页面就会全部展现给用户。当我们做App的设计时,就不需要考虑太多关于尺寸的问题,因为App可以根据手机分辨率的大小而改变。所以只要保证在相同密度的情况下,选择一个通用的分辨率尺寸就好。现在基本都是选750×1334作为通用分辨率尺寸。
现在很多App端内会嵌入WAP页面以便更快捷的更新。例如淘宝首页就是以H5的形式生成的WAP页面。一个双十一活动可能需要实现在用户每天打开手机时呈现不同的页面效果,这样一个需求可能需要十几个甚至上百个页面。这时利用WAP端来展现这些页面,迭代会更加便捷、迅速,在App中的WAP页可以做到随时上线,一天更新十几次都没有压力,这样就减少了一定时间和成本。

3.5 WAP和PC的差异

上述讲了App与WAP的区别,接下来我们就来对比WAP与PC的区别。

image.png

1.界面大小差别
众所周知,PC与WAP最明显的区别就是屏幕尺寸。WAP依附在移动端浏览器中,要根据浏览器最初的设计规范来进行界面设计。手机浏览器的设计范围较小,不能承载过多的信息,只能尽可能展示重要、核心的信息,以此给用户留下深刻的印象。而PC有着大屏幕的优势,操控范围大,展示内容更加丰富。我们可以看到下图中同样的车型页面在PC端和WAP端上的对比。PC端有着大屏的优势,在对比的过程中可以同时进行8辆车、多种数据的展示。在移动端,由于屏幕尺寸的限制,一次只能进行两种车辆的对比。为此,设计师将数据分为几个维度分别通过不同的tab切换展现给用户。

image.png

2.使用场景的差别
当我们需要输入或者接收较多信息的时候,通常会选择PC端来进行操作,因为PC端可以很轻松地完成步骤烦琐、功能层级深入的操作。而移动端使用场景更加碎片化,加上手机不方便输入大量的信息,内容逻辑偏简单化。所以移动端更加注重用户体验和交互,功能相对也更加精简。
3.使用习惯的差别
移动端用户习惯了触屏操作,轻触、滑动是使用移动端时常用的手势。在PC端我们依靠点击鼠标可以进行操作、跳转。如今PC端也在不断发展为触摸屏,今后可能在使用习惯上的差异会逐步减少。

image.png

本章总结了不同载体的设计方法及其差异,通常一个产品会衍生出App、WAP、PC三端,作为一名合格的设计师,了解这些载体的设计方法可以更快地调整产品在各端展现的形式,将产品打磨得更加细腻。但是关于产品的设计没有一成不变的法则,在设计的时候我们需要针对三端不同的特点,调整设计的侧重点。WAP端用户使用成本低,不需要安装App即可访问,但是这也导致无法留住用户。针对这个问题,我们可以在WAP页面增加下载App的入口,这样可以留住一些忠实用户。

image.png

当用户在移动端浏览很长的页面时,我们需要在页面中为用户提供一个快速回到顶部的按钮。在PC端这个功能就相对没有那么重要,因为PC页面可以容纳更多的内容,而且在操作上,用户可以通过滚动鼠标轻松回到顶部。

image.png

越来越多的App中也会嵌入WAP页面的设计,但H5(WAP页)在进行复杂功能和交互方面给用户的体验不如原生设计好。这时候需要考虑关于WAP页面的设计能否在技术上实现,需要提前与产品经理、技术人员沟通。
对于移动端Android和iOS系统来说,并没有好坏之分。一个精心设计的MD风格或iOS风格的应用程序,都可以带给用户相当不错的体验。笔者认为平台制定设计规范的意义在于提供设计的一致性,减少用户的学习成本。设计师们应该抓住两种平台最为明显的特性来展现平台特点(如经典交互设计)。在细节部分的设计中,两种风格的融合也不会导致用户使用的不适,只是千万不要被平台规范所限制。作为设计师来说,我们需要考虑的是视觉效果和产品的实用性,以及如何给用户留下深刻的印象来区分其他产品。

相关文章
|
8月前
|
传感器 XML 定位技术
《移动互联网技术》第九章 感知与多媒体: 了解质感设计的基本原则和设计方法
《移动互联网技术》第九章 感知与多媒体: 了解质感设计的基本原则和设计方法
61 0
|
存储 安全 算法
力波链(Libre)社交系统原理及概念
力波链(Libre)社交系统原理及概念
带你读《好设计,有方法:我们在搜狐做产品体验设计》之二:有源设计
那些激动人心、让人拍手叫好的设计,到底有没有方法可循?背后到底有没有设计理论支撑?答案是肯定的!本书作者是资深体验设计专家,拥有超过10年的产品体验设计和团队管理经验,他们将试图为大家总结和揭示那些优秀设计背后的理论和方法。
|
搜索推荐 新能源 安全
带你读《好设计,有方法:我们在搜狐做产品体验设计》之一:以用户为中心的设计
那些激动人心、让人拍手叫好的设计,到底有没有方法可循?背后到底有没有设计理论支撑?答案是肯定的!本书作者是资深体验设计专家,拥有超过10年的产品体验设计和团队管理经验,他们将试图为大家总结和揭示那些优秀设计背后的理论和方法。
《社交网站界面设计(原书第2版)》——1.5 实践(或最佳实践):做事的习惯性行为或方式
本节书摘来自华章计算机《社交网站界面设计(原书第2版)》一书中的第1章,第1.5节,作者:(美)克里斯蒂安·克鲁姆里什(Christian Crumlish),艾琳·马洛恩(Erin Malone)著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
790 0