不同终端的设计思考(一致篇)

上篇文章写了一些以导航栏为基础而引发的对不同终端设计差异思考,而后留下了一些问题:不同的终端之间有这么多的差异,那么怎样去设计才能达到一个产品的一致性呢?

首先,需要说明一下什么是一致性,为什么要有一致性?

一致性,即整体、统一,是一个产品品牌的体现。而对于设计方面来说,是根据不同的业务需求,形成这个产品的一套设计标准。这个设计标准可以帮助团队进行设计工作,也可以帮助业务团队充分的理解产品,同时也可以使用户更了解产品的设计过程及用户体验的设计价值,提升客户对产品的理解度和欣赏度。

近几年响应式页面很火,因为页面的设计与开发可以根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整,这是最能体现产品一致性。但往往现在一个产品的功能越来越多,一套界面已经承载不起所有的需求,所以为了适应不同的终端,也就需要不一样的设计。比如淘宝:

淘宝PC端和移动端的页面对比

那么, 产品的一致性需要考虑哪些方面呢?拿之前做的一个项目为例子来探讨一下吧。

1.��视觉。

视觉是一个产品的第一体现,是给用户最直观的感觉,在视觉层面上可以分成下面几点:

(1)色彩。

颜色是给用户最直接的感觉,利用色彩刺激用户的视觉,增强对产品的记忆力,让色彩在用户的脑海中形成一种强势的语言。目前市场上,谈到橘红色,让人想到的是淘宝,说到蓝色,可能第一想到就是腾讯,还有微信的绿色。我们是属于互联网金融企业,又是提供黄金白银交易的平台,所以我们给产品的定位颜色是金色。

两端的页面色彩对比

(2)排版。

版式的一致性可以很好的将用户在体验各终端产品时来感知该产品无意识地传达给用户的一致性体验。像Pinterest,它是全球最大的图片社交分享网站。Pinterest采用的是瀑布流的形式来展现图片内容,无需用户翻页,新的图片不断自动加载在页面底端,让用户不断的发现新的图片。这种独具风格的版式在各终端上都能很好的体现出该产品的特点。而我们这个项目是开户的流程,所以在内容的排版上主要以表单的形式来呈现。

表单形式的排版

(3)控件元素。

控件也是页面不可或缺的一部分,比如图标,按钮。有的时候设计不同终端时的页面时,把象征性符号、图形、字体等控件元素结合起来设计,也会使得用户产生对该品牌有一定的品牌认知,也能达到视觉上的一致。

两端图标的统一

这次的项目使用的组件元素是以表单为主,但也有少量图标和按钮,在样式上都尽量做到统一。

2.功能。

每个产品都要他主要的功能,淘宝的主要功能是购物,微信的主要功能是聊天,就算在不同的终端上进行设计,也不能脱离了主要的功能点。不过,同一产品在移动端和PC端会有一些功能增减,主要基于功能是否属于用户高频使用点,以及终端特性的考虑,比如在手机上依靠GPS定位的相关功能、摇一摇、扫一扫等,这些就属于移动端的特有功能点。开户这个项目,功能主要体现在填写表单上,但也有个别的功能两端有些增减。比如,在上传身份证这个功能上,移动端充分使用了终端的特有性能——拍照,所以,在移动端的开户过程中,用户就可以直接使用手机进行拍照上传。在这里,未上传的时,也会有一个小相机的图标提醒用户可以用手机拍照上传。

移动端可以拍照上传身份证的图标提醒

3.流程。

这个不管是哪个产品,多端上的核心流程大致相同,不然用户在跨平台使用时很可能就懵逼了。这个项目是关于开户的流程,所以在流程上都是三步:第1步,填写基本信息;第2步,选择银行;第3步,填写密码(完成开户)。在一个小的细节上面也有做到流程的统一,就是在最开始的时候,需要手机进行验证,当发送验证码给用户的时候,会有一个小弹窗提醒用户去准备身份证,银行卡等。

两端对流程的统一


如果第一次开户没有开户成功,在上传银行卡那里卡了壳,那么当用户第二次进入时,会自动给用户跳过第1步“填写基本信息”,两端的流程统一设计了。

4.字段。

字段是每个页面上不可缺少的传达给用户最直接的信息来源,因此字段相同,也能让用户识别出这是同一个产品。但是有些场景下需要区别考虑,尤其是在页面概要展示和全局功能部分,移动端往往只将用户最需要的内容放在用户的眼前,该隐藏的考虑隐藏,该屏蔽的需要屏蔽。而在开户这个项目中,最需要体现的就是字段的统一,每一个步骤上的表单填写都不能缺少或增加字段。

【小结】在设计多终端的产品时,需要体现多终端的一致性,也需要搞清楚怎样的一致性设计能给用户提供最好的体验,而不是一昧的追求统一。 如果说一致是全局的,那对比就是局部的。跨终端的一致需要找到一个平衡点,过多会显得奇异、格格不入,而我们更需要的是在差异中寻找一致,也需要结合不同终端的特性进行更好的功能创新,比如PC端的点击,移动端的手势,拍照等功能,看需要怎样的一个方式来统一该产品多终端的一致性。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 210,978评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 89,954评论 2 384
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,623评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,324评论 1 282
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,390评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,741评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,892评论 3 405
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,655评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,104评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,451评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,569评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,254评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,834评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,725评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,950评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,260评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,446评论 2 348

推荐阅读更多精彩内容

  • //我所经历的大数据平台发展史(三):互联网时代 • 上篇http://www.infoq.com/cn/arti...
    葡萄喃喃呓语阅读 51,191评论 10 200
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,734评论 25 707
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,734评论 1 92
  • 用天空中烟火的绚烂 用黄土地上激越的鼓点 用节日里欢快的秧歌 和寒冷的冬天说声再见 洁白的积雪还覆盖着远山 流动的...
    伊清欢阅读 287评论 0 4
  • 这两很是闷热,又是瞎忙的一个周末过去了,时间很快,最近太疲惫了。不知道路该如果走下去,想要逃离这个地方,很多事情都...
    任小暴阅读 236评论 0 0