为什么ui要有一致性设计
大家有没有听说过一次性设计
一次性设计就是,我今天投入成本完成了一个界面或者营销需求,但也只是完成了这个需求而已,今后再碰到类似的需求依然吃瘪,还得重新投入一轮成本。这种设计就好像一次性的碗筷,用后即扔,非常非常得低效,它不仅没有办法复用,而且无体系、非模块的处理方式非常摧残设计师的精力。
所以保持一致性设计也是可以提升操作的一致性、提高工作效率、延续品牌定位……而且一致性设计是UI和开发交接的一种很好的办法。
一致性设计的好处
1.复用资源,降低设计成本
很多不同的界面中会用到同一个资源,如果见一个重做一个,会很大程度浪费设计的人力资源
2.产品风格及体验不易出问题
因为资源的复用,能基本保证整个产品的风格不跑偏,而在用户体验上,也起码能保持在一贯的水准
3.新人可以快速上手
比较大型的项目中如果人员流动率较高,一致性就相当有必要了。新人先阅读规范后更容易展开工作,根据一致性也能更快了解当前产品
4.程序能提高开发速度
主要也是因为能够复用自用资源,有些界面和控件,程序甚至无需找设计出资源,在产品策划指导下可直接开发
1.对界面和功能操作的认知统一,学习成本低
熟悉过主要界面/功能后,在其他界面/功能中能基本自由操作
比如在北京开车是靠右行驶,到上海你不用学就知道也是这样。因为中国道路交通相关法律中对此是做了统一规范的。要是这一点不一致的话,到上海突然让你靠左行驶,你肯定要适应一段时间并难免犯错.....
2.提高操作效率
在降低了认知成本后,用户很容易就熟悉了产品的设计风格,那么操作起来自然也更容易上手,效率也更高
3.加强对产品(品牌)辨识度
别人一看很容易辨识出:哦,这是某某等那个产品
常见的产品中保持一致性设计的例子非常多,相信各位天天见,我就不啰嗦了。
一致性的规范提现在哪里
设计规范是一个老生常谈的话题了,网上相关的文章也非常多,但我相信有很多设计师对设计规范的理解还是比较模糊,认为设计规范指的就是字体,颜色,控件规范那些,这种理解其实是比较狭隘的。
于我而言,设计规范用一句话总结就是:设计规范是针对特定产品所制定出来的一整套产品标准,包括流程标准,技术标准,设计规则等等。
今天就只来说最基础的几个小方面(也算是干货满满了)
颜色
字体
组件
交互
其他的一些需要大家根据自己的产品定义
颜色
颜色的搭配和选择影响着产品最后呈现出来的视觉效果,合理的颜色配比能加深用户对品牌的印象。色彩无处不在。
那我们如何去定义颜色规范呢,下面本人分享一套规范,小伙伴们可以根据自己的产品进行套用(如果不对大佬勿喷,一起学习)
首先要定义基本色。理想情况下应该有1-3个基本色与产品相关联。
基本颜色的使用场景主要是
突出显示重要的界面状态或信息
在交互方面:如文本字段切换、复选框等
根据数据反馈60%+30%+10%是是整体画面最有平衡感,也是用户最满意的方案引导用户的视线从一个CTA区域平滑移动到另一个区域。
60%的空间用于主色调
30%是空间辅助/次要颜色
如图
按其他顺序搭配,它仍然有效
3.了解受众
好的用户体验的关键是理解受众。颜色在这里起着重要的作用,因为颜色的选择会影响用户与产品交互时的感受和情绪。
你需要考虑的问题
谁是你的目标受众?
他们的年龄?
产品的专业化是什么?
你想让产品唤起什么样的情感?
注意:与团队讨论选择时,请始终关注这些问题。
如果你想把用户的注意力集中在特定的操作上,最好使用强对比度的颜色来帮助用户找到焦点。
通过这种小技巧检查颜色的饱和度,能看到别人看不见的东西。

另外分享一些将图像生成调色板的实用工具:
Coolors.co/image-picker(Web app)
Alembic(Sketch插件)
Image-Palette(Figma插件)
字体
在项目中文案风格也要和产品定位统一,各个界面出现的文字提示等要风格统一。
主要从五个方面入手
类型
字号
字重
行高
行宽
iOS设备的系统默认字体,中文为苹方,英文&数字为SF UI Text。
Android设备系统默认字体,中文为思源黑体,英文&数字为Roboto。
不同的使用场景,文字的字号也不相同。文字的主使用场景分为:一级标题、二级标题、三级标题、正文和提示文字 。
通常最小字号为12px也有文字最小字号为11px的,特殊情况下,字号为10甚至可能更小,例如标签里面的文字。
字重就是指字体笔画的粗细。字重的等级是用来标明同一字体家族中不同粗细笔画的字型。
UI设计中,常用的字重有两个,一个是常规(Regular),另一个是中黑体( Medium)。
正常文字使用常规体(Regular)。当需要突出层级展示,增加对比时使用中黑体( Medium),中黑体( Medium)常用于标题。
字号大小等于文字高度,如下图所示,字号为16时,行高设置为16,那么其行高也是字体本身的高度(16pt)。
如下图所示:行间距距离文字上方为3pt,行间距距离文字下方也为3pt。字体高度为16pt。
举个例子,设计一个标签时,当字号为14时,行高为20,那么为了保持视觉上字体到四周距离相同,那么上下间距为4,左右间距为8。
因为行间距的存在,不能将上下间距和左右间距设置相同。
如果行高设置为14(文字本身大小),那么上下间距应该也为8pt,而非4pt。

下图是Sketch默认字号和行高对照表
行宽=字体宽度+两侧距离字体的宽度
将行宽拉长,代表着设置了文本内容范围,文本距离右侧语音图标为12pt,表示当文字内容距离语音图标12pt时,文字打点或截断展示。
组件
组件的使用场景有很多今天借一个例子来分析和总结,让大家了解和认识组件的使用和规范。
那就来个最基本的:顶部栏设计
组成
变化
交互方式
来认识组件的模式和规则
顶部栏的常见样式
顶部栏是什么样子,它由什么组成?
通常,顶部栏提供有关此页面总体的信息,以及用户可能对该页面进行的潜在操作。常见的顶部栏如下所示:
顶部栏中常见的组件包括:标题、容器、操作项、导航图标等,接下来为大家逐一介绍各个组件的使用。
顶部标题通常与底部导航一起使用,共同解释页面的信息。
如果一个页面中底部导航只有图标没有文字解释,用户有可能不了解图标的意思,那么解释页面信息的重任就落在了顶部栏的标题上。
大多数情况下,标题位于顶部栏的中间,有时也会在左上角有一个很大的标题作为导航(IOS应用中)。除了解释页面的目的,大标题还可以用于品牌推广。
标题也可以解释用户在这个页面上执行的操作。例如,当用户想修改个人资料时,标题会显示“edit profile”,用来解释操作。
有时,在顶部栏主标题的下方会有补充文本,这样方便为用户提供更多的信息。
容器的趋势越来越不明显。容器通常是灰色或者不饱和的颜色,有时容器也会使用品牌主题色,起到宣传和推广品牌的作用。
操作项通常以图标和文本按钮的形式出现在顶栏上 ,当需要时可以在顶栏上显示0-4个图标或文本按钮。
在不同的页面中操作项可能代表不同的含义,但一些常见的图标/操作遵循着一定的规则:
1、返回:当用户进入第二/第三层级页面时,“返回”通常出现在左上角。单击“返回”图标可引导用户回到原始页面。
2、关闭或取消的位置不固定,可以在左侧也可以在右侧,具体取决于是否有其他操作。
这里讨论一个常见的问题,顶部栏中“返回”和“关闭”分别应该在什么情况下使用:使用“返回”:当用户在一个漫长的探索过程中需要不止一步的操作,或者在该页面上没有一个简短而明确的目的时。使用“关闭”:表示一个完整的单页操作,它有明确的起点和终点,在页面上执行特定的操作实现特定的目的。
3、个人资料或帐户有时会出现在顶部栏上,以方便用户编辑个人信息,设置或切换帐户。
4、添加或搜索可帮助用户浏览更多内容或者扩展他们感兴趣的区域,通常出现在右上角作为易触摸的目标。
需要注意的一点是,为了避免引起不必要的关注,顶部栏上的图标/文本按钮通常是线性图标而不是填充图标,并且是非饱和颜色。除非它们确实想吸引用户的注意,或者为了提示用户进行操作。
使用App时我们会发现,有的页面顶部栏中没有标题,而是增加了一个搜索框(淘宝首页)。
根据特定的需要,可以将搜索用在不同页面的顶栏上,因为它在用户浏览内容时为用户提供了更多的价值。
什么时候放弃使用顶部栏?
当顶部有很多内容时,一些App会让顶部栏变得非常简单甚至完全舍弃。
在Robinhood顶部显示最重要的用户信息——每日投资增长,右上角只有一个提示文本按钮,用来邀请好友。
放弃使用顶部栏的常见案例是个人资料页面。这样做的目的是自我暗示,这个页面自己可以掌控,个人信息在顶部占据了很大的空间。
一个页面中可以有很多交互发生,有时顶部栏需要通过改变样式或内容来反映交互动作。
反映滑动位置
下滑出现顶部栏:当顶部栏有许多重要信息但又占用大量空间的情况下,顶栏的内容可能会根据滚动位置而变化。当用户下拉页面以获取更多内容时顶部栏会出现。
下滑隐藏上拉出现:另一种形式是在Google搜索中,用户向下滑动顶部搜索框会隐藏(Google猜测用户希望集中精力浏览内容),但是只要用户向上滑动,中止浏览过程,顶栏搜索框又会出现。
不管交互形式如何,这类顶部栏能在用户需要时快速显示:
用户可以进行搜索功能或常见操作;
标题/重要信息作为参考,提醒用户在哪个页面。
下滑隐藏顶部栏:对于那些不会影响用户需求和操作求的顶部栏,通常会随着页面的向下滑动而隐藏。
星巴克顶部有一个令人愉快的问候语,当用户向下滑动并尝试选择要喝哪种咖啡时,它会随着页面滑动而消失。
Airbnb会在顶部展示房屋图片,以便给用户留下深刻印象,但是当用户向下滑动时,顶部的图片也会跟着滑动。
反映当前页面的变化
有时,顶部栏的信息会根据内容的变化而实时发生改变。
最常见的案例是收到消息时的反馈:在微信中,顶部标题会显示用户收到信息数量的变化;Instagram通过顶部小红点的变化来展示收到的消息。
作为页面中必不可少的一部分,交互式顶栏减轻了页面中其它元素的负担。除了常见的图标或文本按钮(添加、取消、后退)的变化,在顶部栏中还会发生哪些有趣的交互?
互动标题
有的产品服务非常依赖于用户的偏好、位置,例如常见的外卖或打车软件。
在这种情况下,App通常依靠用户的初始输入来决定显示的内容,用户也可以直接在顶栏标题上编辑信息。
交互式图标/文本按钮 交互式图标/文本按钮意味着用户可以在顶部栏上执行某些操作,而不必离开此页面。在robinhood中用户可以在不用切换页面的情况下,直接选择购买股票要用的计算方法,或者把页面上的股票添加到自己的收藏中。
顶部导航
有的App希望在一个页面中能显示多个平行的内容,所以会在顶部栏上设置多个选项,实现更方便的导航。
常见的顶部导航包括分段控件和标签导航:
分段控件导航选项一般不支持左右滑动,选项较少,;标签导航选项的设计更多样,支持左右滑动切换。
https://www.xueui.cn/experience/app-experience/top-bar-ui-design-patterns-and-rules.html
研究过程可能会花费很多的时间和精力,却能让我们真正受益。
总结
一致性设计大方向为产品有更杰出的体验,在保证用户体验良好的同时,我们需要与同类产品做出差异化竞争设计,这就需要我们平时多观察互联网设计趋势,国外设计趋势,集合自己品牌去打造一套好用的产品。
这里推荐几个必看的大厂设计规范官网,建议收藏。
苹果iOS设计官网:https://developer.apple.com/design/human-interface-guidelines
谷歌Material Design设计官网:https://material.io/design
微软Fluent Design System设计官网:https://www.microsoft.com/design/fluent
IBM设计官网:https://www.ibm.com/design/language
Facebook设计官网:https://design.facebook.com
蚂蚁金服设计官网:https://ant.design/index-cn
其实,规范也是要在遵守和引领用户习惯中不断迭代的。既要保持大的设计规范框架不变化,又要在设计的过程中给用户制造惊喜。比如,整个UI的配色和字体需要保持统一,但在一些图形,动效上可以做出亮点,让用户在整个使用体验中既是沉浸的又能有些小惊喜。规范的打破与重建一定是需要一个动态平衡的过程。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
信息组织是我们在日常生活中经常会遇到的问题。各式各样的信息是如何被组织编排到一起,又是以何种方式把信息呈现给用户呢?
全文阅读约 5 分钟, 主要分享 Ant Design 在页面信息组织策略上的探索思路。
人们是如何组织信息的?
在 Ant Design 的界面设计中,会包含大量的信息组织和编排工作,我们常常会遇到这样的问题:
· 一个详情页面里应该包含哪些信息?
· 什么样的信息应该放在卡片里,什么样的信息应该平铺显示?
· 一个页面内的信息该怎么让用户快速找到重点?
· ···
信息组织是我们在日常生活中经常会遇到的问题,商场里的楼层导航、机场车站的标志指引、餐桌上的菜单、手机里的通讯录等等,各式各样的信息是如何被组织编排到一起,又是以何种方式把信息呈现给用户呢?
在解答这些关于页面设计的问题之前,我想先给大家讲一个生活中的小案例:
动线设计
逛过宜家的人,应该会注意到宜家类似迷宫的动线设计,这种动线设计能够让消费者不知不觉逛完商场的各个角落。踏入宜家门口时,就会被一条隐形“向导”默默地引导着向前走:一条曲折宛转的主线依次引导至客厅家具、客厅储物室、卧室、书房等各个主区域,直到一个不落地走完才抵达出口。但在这个主线之外,为了确保一些消费者在购物中,能够快速离开或快速去往感兴趣的区域,每个主区域间都有一些较隐蔽的捷径作为辅动线。
这种动线设计一方面能够把所有商品按照路径有效的串联起来,另一方面又能让消费者不知不觉的沿着这个路径去了解商品。
商品布局
动线布局是宜家的隐形骨架,而真正让宜家卖场丰富起来的,还是琳琅满目的商品。宜家的卖场和大部分零售卖场不一样,它不会把同类型产品进行大集合,而是根据人们的正常生活场景来分类,不同类型的产品在同一区域组合陈设,构成生活中的一个小场景,一方面能达到对各个商品功能的完美诠释,另一方面,一个产品尽量不会重复出现,尽可能减少商品展示的复杂性。
在整体商品布局上,有两个很有意思的地方:第一,在居家体验中心,样板间的陈列顺序完全是按照消费者回家后的场景而布置:客厅、餐厅、厨房、书房、卧室、卫生间......,第二,在家居用品中心,则会根据消费者在家的日常起居行为进行摆放:做饭、休息、读书、收纳......
现实生活中的这些例子,对我们的界面信息组织有什么启发呢?
关于动线和布局的思考
在宜家的案例中,关于动线,映射到人的行为上,有一个比较专业的概念叫做“流”(flow)。 Mihaly Csikszentmihalyi 的著作《心流:最优体验心理学》中对“流”的定义:当人们全身心投入到某个活动中时,会对周边干扰视而不见,这种状态被称为“流”。宜家的动线设计很好的营造了这种状态,让消费者完全沉浸于商品浏览,并且尽量不去打断这种行为流。
经过研究发现,构成“流”的行为动作,其前后必然存在某种连续性或者关联性,例如回家的行为动线,日常起居的行为关联等。这个概念在界面设计中依然适用,很多界面设计都在有意无意的去创造“流”的状态,带给你用户沉浸式体验,例如各类短视频应用会根据用户浏览习惯推荐相关联的视频内容,让用户沉浸其中无法自拔。
关于商品布局,映射到信息组织上,《韦氏大词典》 中提到一个词“编配”(orchestration),对应的解释为“和谐的组织”。这个词能比较好的表达信息组织的含义,宜家的商品和谐的组织构成一个场景,它向消费者传递的不仅仅是商品本身的功用性,更是在传递一种搭配建议或者一种生活方式。这种商品组织方式能非常有效的降低消费者对信息筛选的复杂程度。而在界面设计上,表单页的和谐组织能够帮助用户快速完成信息录入,详情页的和谐组织能够帮助用户快速理解一个描述对象......
各种各样的信息总能以某种关系组织到一起,而如何根据这种流为用户去组织和呈现信息呢?
“流”的本质其实是一系列具有关联性的行为动作串联,而“编配”的目的则是为了降低串联信息呈现的复杂程度。有了这两个基础的概念之后,我们可以做一个初步假定:所有的信息是否都可以通过关联性和复杂度来进行组织编排?针对着这两个维度,我们又进行了更深层次的研究和验证,并得到基本定义:
· 信息复杂度:信息量的大小,包括种类、数量等。
· 信息关联性:信息之间的潜在关联或者相互影响。
我们设想,这两个维度能否运用到界面设计上的信息组织呢?
页面信息的组织方式
信息关联性
界面信息之间的潜在关联或者相互影响,通常体现在「逻辑关联」和「视觉关联」两个层面。
逻辑关联
顾名思义是指一个事件中的所有信息之间的关系,在界面设计中,无论什么样的信息,总能以某种方式进行分类和编排在一起,例如手机通讯录中的人名,可以按照字母顺序从 a 到 z 进行排列,电商网站的商品导航会根据类别进行分组,待办事项可以根据时间进行排序等。
如何找出信息之间的逻辑关联性呢?
被称之为信息架构之父的 Richard saul wurman 在《信息焦虑》一书中将信息组织方式用“五顶帽架”来概括:
· 地点(Location)
· 字母(Alphabet)
· 时间(Time)
· 类别(Category)
· 层级(Hierarchy)
简称LATCH。这五种方式基本可以涵盖所有的信息组织策略,信息是无限的,但是信息组织方式却是有限的。
视觉关联
任何一个界面呈现给用户的时候,用户都会下意识的去判断界面上什么信息是最重要的,接着会去关注这些信息都有什么关联,因此,除了按照逻辑去组织信息之外,还应该合理的去呈现信息的视觉层级关系。
视觉层级关系有几种常见的区分方式:
· 强调:使用基本视觉元素(颜色、形状、大小等)区分层级
· 亲密性:位置接近的元素通常是有关系的,而且位置越近,关系越强
· 图胜于言:视觉符号和对象关联,例如:齿轮或扳手=设置,垃圾桶=删除
· 浏览顺序:根据浏览顺序,从左到右(部分地区)或从上到下信息重要程度依次减弱
· ···
如何验证界面元素的视觉关联性是否合理呢?
眯眼测试
《About Face 4: 交互设计精髓》 中提到了一个很有意思的测试,为了确保界面视觉信息有效的拉开层次关系,图形设计师经常会用到一个方法“眯眼测试”(squint test)。闭上一只眼睛,眯着另外一只眼睛看屏幕,看看哪些元素突出,哪些元素模糊,哪些元素看上去成组,哪些元素看上去零散。从多个角度去观察,总能够发现之前没有注意到的布局和构成问题。
信息复杂度
通常以信息量的大小或样式多少来衡量,这两个维度实际决定了信息的浏览时长。例如一个详情页面内都是纯文本信息,但是信息量较大(超过三屏),则认为这个页面的复杂度较高,或者一个详情页面内同时包括文本、表格、代码展示、图表等元素,也会认为这个页面的复杂度较高。
信息的复杂度和关联性并不是两个完全独立的维度,根据关联性去组织信息,本身就是为了降低信息呈现出的复杂程度。而对复杂度的研究,可以帮助我们如何选择合适的方式把信息呈现给用户。
页面信息组织实践 - 详情页设计
具体到界面设计层面,信息体量大、复杂度高常常是中后台界面设计的难题之一。以详情页为例,详情页内的信息该如何合理的组织信息并有效的传达给用户呢?
根据关联性和复杂度的概念,我们抽象出一个简单的「复杂度模型」,用来判断信息复杂程度和关联性对页面结构的影响。
横坐标表示页面信息之间的关联性,纵坐标表示信息的复杂程度,两者交叉组成的色块代表不同的信息等级。靠近原点最浅的色块,代表复杂程度低且关联性强的内容,例如一段纯文本的产品描述信息;远离原点颜色最深的色块,代表复杂程度高且相互独立的信息,例如一个发布流程中的集成测、预发环境测试、灰度测试、上线等各个阶段信息展示。
与之对应的,我们对信息展示方式也进行了维度划分,用来解决在复杂的企业级产品界面设计中,何时使用卡片区分,何时拆分为 tab 等布局问题。
根据承载信息复杂程度的不同,我们对容器组件也进行复杂度划分,用来解决在不同页面布局中,不同类型的信息用何种方式呈现的问题。
这个模型可以帮助设计者在决策布局组件时,有章可循。最终让用户感知,当用户来到一个页面时,即可对页面的信息量、信息的搜寻方式有统一的预期。我们尝试将复杂度和关联性模型在界面布局中落地:
关于以上的模型在实际设计中该如何操作,这里提供一个推荐步骤可以参考:
· 「复杂度判断」明确设计对象信息量的大小
· 「关联性判断」判断各个信息之间的关联性,并合理分组
· 「组件选择」选择合适的容器组件来呈现信息
· 「模板选择」选择合适的页面模板,组织编排信息
· 「眯眼测试」检查整体布局是否合理(仅参考)
文章来源:站酷 作者:Ant_Design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在当今互联网快速发展的情况下,每个行业竞争都非常激烈,所以对于我们设计师而言,有时候项目的周期也非常紧迫,导致当我们接到需求时,很容易会遇到这样的问题:需求方解释不清楚,设计师不知道从何开始,对项目也是不了解,后面临时想到什么就问什么,使我们工作效率低下,也会让对方觉得你很不专业,做完的方案,需求方不满意,改了又改,浪费了很多宝贵的时间。
那么我们如何在项目周期紧迫的情况下,通过有效的沟通准确的输出运营设计方案呢?下面,我将和大家分享一些我在日常和需求方沟通的一些小技巧。
所谓有效的沟通,是通过听、说、读、写等载体,通过演讲、会见、对话、讨论、信件等方式将思维准确、恰当地表达出来,以促使对方更好的接受,使双方就某个问题可以达到共同认识的目的。
当接收到一个设计需求时,不要忙着动手开始做,要先去与需求方沟通清楚,如果少了前期的沟通,后期你可能会在无休止的改图中,一点点的不仅失去了耐心,还磨灭了激情!
首先了解项目背景、活动的文案和玩法以及活动的目标及用户人群。
根据活动的文案和玩法去网上搜索一些针对性的有启发性的图片案例作为参考,用来初探需求方的喜好,明确接下来该走的方向,最后达成对风格的整体认知。同时要整理好自己的设计思路。
随时记录
带着前期准备的内容去和需求方沟通,把自己的一些设计想法给对方讲清楚,这样做能保证我们在和需求方讨论的时候能做到心中有数,不会被牵着走!
与需求方沟通时随时记录在沟通中对方的想法,比如需求方想重点突出表现什么,想营造出什么样的氛围等。也可以记录在讨论中一些好的创意,再结合自己的思考运用到实际中。
「沟通过程中的 3 个小技巧」
先听:这一阶段很重要,一定要以求知的心态去了解需求,不要拿着一个自认为的结论去沟通,因为产品在提出需求时,也一定是经历过多次推翻自己的想法,最后才选择的这一版方案及玩法。
后问:这个时候有不明白或者没有理清的地方要及时的提问,问题要明确,避免后期重复沟通。
再复述:将接收到的信息总结后与对接人复述,查漏补缺,确认下没有出现任何的遗漏。
达成共识
前面的所有点都确定好了之后,这时候我们已经与需求方达成共识,就可以进行设计阶段了。
下面我将通过实际案例,具体说一下我是怎么通过有效的沟通与产品达成共识,从而减少多次改稿的问题的。
项目背景:
此次双 11 大促活动借助京东这一平台,增加品牌的曝光度,吸引用户下单,为业务线吸引更多的流量,促进转化率。
头图文案:
活动的玩法:通过预售提前付定金,享受折扣这样的活动方式来吸引用户。
针对的用户人群:用户群体年轻,女性占比较高,超过 80%的用户在 35 岁以下。
参考的搜集和对设计的想法
由对第一点的总结,得出设计目标:
参考图的搜集:
了解完项目的背景,和对项目进行初步的思考之后,就可以带着自己的想法和参考图去找需求方沟通。
随时记录
给需求方看参考图,他们对用 C4D 搭建场景的创意表示认同与支持,也很期待。
在讨论时也说出了他们的诉求(这时候要拿小本本记下,好记性不如烂笔头):
达成共识
与需求方沟通完需求之后,心里有了方向和发力点,结合需求方的诉求和自己的思考,就可以胸有成竹的往下进行了。
这几个步骤虽然看似简单,但是做到了这几项,产出的设计稿可以减少改稿的次数!
最终设计结果:
把需求方说的每个点都着重考虑到,以免等完稿的时候再修改。
最后我们来回顾总结一下
不管项目大还是小,每次做完都要去做一个总结复盘,把遇到的问题记录下来,多思考是哪个环节出了问题,或者请教有经验的同事,逐步优化自己的沟通流程。养成良好的沟通技巧,这样对于在下一次接到新需求的时候不至于手忙脚乱,做到心中有数,这样会大大的提高自己的工作效率!
如何有效沟通是一个需要长期去总结思考的事情,只要掌握方式方法,再经过刻意练习,就一定会有好的结果。
文章来源:优设网 作者:58UXD
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语:如今可以说是短视频时代,各种短视频平台充斥着我们的娱乐生活,在如此快节奏的时代,碎片化的时间刚好可以被短视频满足;本文作者分享了关于短视频【单列沉浸式】的分析,我们一起来看一下。
谁能统一短视频领域?
抖音?快手?还是视频号?
目前来看,这个答案是【单列沉浸式】。
准确来说,单列沉浸式不是一款产品,而是一种产品形态。
过去这一两年,抖快两极越发明显,格局变化不剧烈的短视频领域发生的一个还算比较明显的变化是,所有的短视频都开始在产品形态上向抖音看齐了。
包括快手、微信视频号,甚至微博小视频,主流的短视频产品都已经全面拥抱单列沉浸式。
图:抖音(左1)、快手(左2)、视频号(左3)、微博(左4)
这是不是可以证明单列沉浸式就是短视频消费的最佳形态?
无论是成熟的老产品快手和微博,还是初出茅庐的新产品视频号,为什么短视频难逃单列沉浸式的真香定律?
如果要找一个正确的角度去切入,主要包括三个维度:
单列VS双列,沉浸式VS非沉浸式,到底区别在哪?为什么说单列沉浸式是更加适合短视频的消费呢?
短视频是高度碎片化、kill time式的消费,这个消费有个非常大的特征,就是无脑,也就是用脑成本极低。
图:系统1(左)、系统2(右)
我们在刷短视频的时候,大部分时间是处于左边的系统 1 状态,是快速的、本能的、自动化、情绪化的大脑工作状态,用脑成本低。
为什么同样是2个小时,明明可以完整看完一部电影,很多人仍然选择用短视频来消费?就是因为看短视频不需要动脑,只要被动的接受平台投喂的多巴胺、肾上腺素和荷尔蒙,产生愉悦感就好。
长短视频获得的快乐自然是不一样的,长视频虽然也大量充斥着价值极低的内容,但普遍认为长视频的内容价值远远高于短视频;因为长视频是比较完整、系统的去阐述,比如说长时间铺垫后的高潮、明线暗线的多方交织、一波三折、高潮迭起的情节等;而这些更加高级的价值感都是需要大脑去思考、分摊到时间上面才有意义的。
用户在看长视频是相对高唤醒的状态,在看短视频是相对低唤醒的状态。
单列沉浸式是更加完美的契合这种无脑状态的,因为它的消费成本更低、体验更好。
首先是单列相比较于双列,是更加短平快的消费方式,可以减少用户的思考、选择和操作。
在单列中,用户切换视频只需要上下滑,播放完自动切换甚至无需成本;而双列中,用户需要返回重新选择并点击观看;切换视频的成本,双列高于单列。
图:单列消费路径(左)、双列消费路径(右)
短视频因为时长极短,意味着用户在单次消费的过程中会消费非常多的内容单元,每多消费一个内容单元,双列与单列的成本差就会进一步扩大,双列成本相对的就越高,单列成本越低。
因为单列消费路径短、消费成本低,在相同的时间内,单列比双列能够看到的视频数就更多,效率就更高。
当然,双列可以给用户更多的选择,提高系统整体的容错率,但是这个选择的收益本身就不大;因为短视频价值极低,时长又极短、消费成本极低,这代表着选择的ROI低、选错的成本也低。
不妨将选择的成本分摊到视频消费时长中,长视频因为时长很长就会比较划算且必要性强,而短视频因为时长极短就不划算且必要性弱。
而且现在推荐系统越来越准,在短视频的消费中比人的主观选择还要准,基本上是抹掉了选择带来的收益,还省了选择的成本。
所以单列是比双列更加适合短视频的。
而沉浸式为什么比非沉浸式更加合适,是因为沉浸式可以使用户更快、更好的进入视频情境之中;而忘记真实世界的情境,因为没有其它视频信息的干扰,能够让用户只专注于当前的视频。
图:可对比视频号单列沉浸式(左)和单列非沉浸式(右)
抖音负责人张楠曾经将抖音的成功在消费端归结为“全屏高清、音乐、个性化推荐、传递美好”四个因素。
全屏高清其实对应的就是沉浸式的消费体验。
手机中的原生相机拍出来的视频就是全屏的,如果将一模一样的短视频放在不同的尺寸上去看,全屏效果无论是视觉冲击力,还是进入其中、身临其境的感受上都是最强的。
这说明全屏高清是当时沉浸式在视频尺寸和清晰度上体验最好的形态,到了现在,全屏依然是最佳,清晰度却已经变成了1080P甚至更高。
单列沉浸式的消费体验更佳、成本更低,且非常适合短视频这种无脑式的kill time消费,自然是最佳的消费形态。
同时,这种形态也是产品上瘾的基础之一。
为什么刷抖音会上瘾,停不下来,一刷不知不觉就一两个小时了?
主要的原因可以归结为两个,第一个是用户持续无脑、愉悦的状态,跟短视频的内容有关;第二个则是因为单列沉浸式上下滑。
沉浸式的视频构建了专注的情境,让人忘了时间的流逝;而单列上下滑切换视频成本极低,切换时间极为短暂,这点非常重要;因为这意味着用户基本无缝切换视频,无脑、愉悦的状态不会因为切换而被打断;上下滑简单、不用思考,容易形成习惯,甚至是自然反应。
用户打开抖音不知不觉就继续看下去了,不喜欢就立即划走,像个快乐的魔盒,没有尽头,自然而然就上瘾了。
上瘾后用户时长也就增加了。
时长的增长可以看做是短视频目前阶段绝对的核心指标,首先是因为短视频本来就是杀时间的利器,时长代表着一切;其次则是因为短视频用户数量的增长已经趋缓,只能靠争夺时长来保持增长。
这也是为什么那些原本不是单列沉浸式的短视频敢改版的原因,强推一个新的功能尚且要考虑用户的旧习惯、是否接受、学习成本如何,何况这是完全另一种产品形态。
单纯拿用户体验提高是无法有效说动的,因为没有数据去论证用户体验到底提没提高、提高了多少,大厂的产品运营都背着严重的KPI或OKR,但是用户时长的增长就是最有利的支持。
单列沉浸式对于平台商业化的贡献其实可以基本从单列的角度去分析,主要有两个层面:
NO.1 单列的变现效率远高于双列。
以目前最主流的信息流广告为例。
单列比双列消费的路径短、成本低,同样的时长内,单列比双列能够消费的视频总数更多,也就意味着可消费的广告更多。
更重要的是,单列的内容推荐完全由系统决定,用户无法选择,系统对流量可以做到100%的精准把控,决定推荐给用户内容就内容,决定推荐给用户广告就是广告;抖音可以做到让广告跟内容一样100%的曝光到用户面前,目前抖音基本上是每5个内容就插一条广告。
双列由于在消费路径上,还需要用户去选择点击观看,意味着转化路径多了一个环节:从瀑布流的图片封面到内容观看的CTR转化率。
双列形态下,广告的CTR是不可能达到跟内容一样的。
据快手《2019快手创作者报告》披露,快手的内容CTR为20%,但是根据【乱翻书】对实际从业者的访谈,内容CTR和广告CTR的差距要比想象中更大,甚至达到5-10倍的差距,也就是广告的CTR可能只达到1%-2%。
当然,有人说双列因为有了用户主动选择来表示较为明确的需求,所以理论上是可以为每个点击收取更高的价格,类似于搜索广告的价格远大于展示广告,有没有可能正负为零,完全弥补曝光率的不足?
很大程度上是不可能。
双列仍然是展示广告,它跟单列的差距会在一个有限的范围内,搜索广告之所以点击价高出这么多;除了明确的意图带来的高匹配度之外,另外一个很重要的就是搜索是比较急迫的需求,急迫的需求+高匹配度才使得搜索广告的溢价高。
而日常我们刷抖音快手这些娱乐性质的短视频是没有这些急迫的需求的,是需要短视频平台展示的广告来切中或者激发我们需求的;这也是为什么双列形态下,广告的CTR达不到跟内容一样的原因,娱乐性的内容跟广告的内容是不统一的,用户的心理接受度也不会很高——用户上来是看包袱消磨时间的,不是买买买的,而人的主观选择也会趋向于避免广告。
那么单双列展示广告的点击价的高低就来自于命中需求的准确程度+展示效果了,准确率由推荐系统决定,关乎算法和数据;而数据的维度是来自于非常多层面的,不仅仅只是点击广告的数据,所以这方面就算有差距也很难说差距多大;而展示效果的话,单列沉浸式的【大屏+视频】的展示效果远高过双列下的【小屏+图片】。
所以很可能的结果是,单列和双列的广告点击价之差在一个合理的范围内,是很难完全抵消掉内容和广告CTR的差距的。
这样综合来看,单列的变现效率是高于双列的。
单列不仅增加了用户整体变现的时长,同时也提高了整体变现的效率,因为增加的变现时长不仅仅来自于新增的总用户时长,也来自于抢夺了其它消费形态下的时长;比如说快手的单列会抢夺双列的时长,而因为单列变现效率比双列高,所以也提升了变现时长在用户消费总时长中的比例,提高了整体的变现效率。
NO.2 单列双列会造成不同的内容生态,影响到公域和私域的强弱,进而影响到平台的整体变现效率。
单列相较会强内容、弱关系,因为单列完全是系统推荐什么看什么,容错率低,系统往往就倾向于推荐头部优质的内容;而双列就弱内容、强关系,因为双列除了系统推荐之外,还要用户主动选择,加强了整体的容错率,所以系统推荐的内容就会更加多元。
相较而言,前者私域弱、公域强,后者私域强、公域弱,而公域强才有利于平台变现。
公域强意味着平台对于流量的掌控权,快手老员工就在内部信中提到:
双列下kol的私域流量粘性太高太强势,很不利于我们把用户的arpu(每用户平均收入)持续做高(直播电商虽然现在势头很好,但本质是kol的私域流量太强,所以我们公域的短视频推小店效果不好),那么今年流量分配也要重新调整……
私域强是有利于平台创作者,公域强才能肥了平台自身,淘宝、拼多多和美团等超大型交易平台之所以收入这么高都是因为强公域,更好的掌握了流量的分发权,进而更的变现;抖音之所以成为超级印钞机,也是因为完全掌握了流量分发,公域能力极强。
单列可以将流量的分发权更加集中在平台的手上,提高了平台整体的变现效率。
或许是基于单列沉浸式在商业化上的这些优点,现在连以双列和中视频为主的B站都坐不住了,也开始加入单列沉浸式。
图:B站的【单列沉浸式】
B站因为文化氛围好、私域强,无论留存还是用户时长都很理想,但就是整体变现效率低:双列下信息流广告不好变现,同时也为了文化氛围而束手束脚。
新开一个单列沉浸式可以说是创造了新的消费场景,同时也有助于提高变现效率。但中视频在B站的单列沉浸式的视频中占据着比较大的比例,未必会真香。
短视频之所以真香,归根到底还是跟短视频这种载体和消费场景密不可分。
短视频因为冲击强(体验好)、消费成本低,所以非常适合碎片化、kill time式的消费。
冲击强跟视频这种载体有关,视频比文字、图片的冲击性更强;
而消费成本低则跟时长有关,因为时长极短,所以消费成本极低,同时时间弹性也极高,又因为时长短,很难承载比较有深度、有价值的内容;再加上碎片化的消费场景,所以用脑成本极低,看短视频大多数时候都是无脑状态。
商业的进化必然是往体验更好、成本更低、更加的方向去进化,单列比双列、沉浸式比非沉浸式的体验更好、消费成本更低,更符合短视频碎片化、kill time式的无脑消费;
但B站的中视频已经有点脱离了这个场景,中视频已经可以承载一些有深度、有价值的内容,很多人在B站也并非完全是单纯的kill time,而是看财经、涨知识等,需要用脑思考,消费成本也比较高。
在这个场景下,双列的多选择、强容错就是有必要的,因为选择的RIO变高了,选错的成本也高了,所以B站做单列沉浸式未必会有短视频这么香。
当然,B站也可以学微博,单列沉浸式只展示短视频,无异于在内部开一个抖音,创造一个完全的短视频产品。
具体会如何,拭目以待吧;希望对你有帮助。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如何制作视觉平衡的图标,正确的形状对齐以及完美的圆角
完美,不是因为没有什么可以增加,而是没有什么可以减少。
创建美观、可用和的UI界面需要花费时间进行设计细节的打磨,本文从视觉和情感化设计两个方面来说说如何提升UI设计的高级感。
1、视觉元素
在互联网产品日趋成熟的今天,你会发现所有的App越来越像,似乎是同一套模版设计出来的产品。而这种普适化的设计会导致同质化严重,使得设计不精致,产品没有气质和品牌感。一个App设计是否精致,是否富有设计感,在于它的细节,这就意味着我们在进行设计的时候,要从细微之处着手,从多方面去钻研如何创造出打动人心的UI设计。本节总结了12个简单直观的提升设计感的小细节,一起来学习。
1.1 使用颜色深浅构建层次结构
在对UI 文本进行样式控制的时候,最常见的错误莫过于过度依赖字体大小差异来营造对比。单纯使用字体大小对比,所营造的对比并不够,尝试结合色彩和字重来营造更好的对比效果。
每种颜色都有一个视觉权重,这有助于在内容中建立层次结构。通过使用颜色的深浅,为元素赋予不同的重要性。如果可以的话,你甚至可以采用两到三种颜色:
类似的,在UI设计的时候,通常两种不同的字重足以营造出优秀的层次感:
▲主标题字重为600,其他标绿点的文字字重都为400
应当尽量不要让正文部分字重低于400,因为这一部分字体本身尺寸已经较小,低于400会使得可读性不佳。如果你依然需要降低字重,那么不妨让字体色彩更浅一点,或者替换成其他识别度较强、字重相对较小的字体。
灰色文字在无彩/彩色背景下要分开处理
不要在有色背景上使用灰色的文本,在白色背景下,将黑色的文本改成灰色(或者在黑色背景下使用灰色文本),是不错的淡化其视觉效果的做法。
但是在彩色背景下,想要降低和背景色之间的对比,通常有两种方法:
一是降低白色文本的不透明度;二是让文本逐步接近背景色,而不是改为灰色。
▲左图设计师职位信息为白色文字降低不透明度,右图为和背景同色相高明度的颜色
其次当涉及长篇内容时,大面积的深色粗体字会给人一种沉重感,而且很跳跃。通过选择类似深灰色(#4F4F4F)这样的颜色可以很容易地解决这个问题,使文字更容易被识别。
1.2 统一色调
选择一种基础色,再调整色调和颜色深浅来增加均衡。设计时避免用过多的颜色。如果项目允许,只需使用固定的色板,通过调整基础色的饱和度和明度,利用这种简单的方式为设计增加一致性。
1.3 干净的阴影
阴影是UI设计中最常见的视觉表现手法,它可以增加元素的深度,使其从背景中脱颖而出,引起用户的注意力,同时也能增强画面的视觉层次感。相比于采用大范围的扩散模糊阴影,使用微妙的垂直偏移阴影效果更明显,更自然,它模拟了最常见的光源特征,光线从上往下照下来所营造的阴影效果。
这种轻柔的阴影呈现出的干净,增加了画面的精致。如果阴影的范围太小或颜色太深,位置也没有偏移,而是聚集在元素的四周,就会让画面更加扁平,让视觉变得厚重,呈现出不精致的画面感。
还有一种扩算阴影是模拟元素本身的颜色投射在背景上,由于阴影与元素的色调一致,因此呈现出十分融洽的画面感。在UI设计中,这种手法不宜过多使用,否则呈现出的各种色彩搭配会让人眼花缭乱。
1.4 个性的图标设计
合格的设计师能够绘制风格统一的图标,而优秀的设计师能够创造风格独特的图标。我们能否在追求大小一致,圆角一致,线宽一致和配色一致的同时,为它的视觉表现力加入更多的创意呢?例如下面这组图标设计,无论是在图形上的创新,还是颜色搭配上都呈现出无与伦比的创意。
标签栏作为一个App的全局导航起着至关重要的作用,它的设计影响着整个产品的视觉风格。通常,大多数App都是使用iOS规范的设计样式(默认灰色,选中填充品牌色),这样的设计太普通,太常见了。要想让标签栏图标设计精致和富有个性,可以丰富每一个选中态图标的视觉表现,例如给图标加上背景和表情,即显得生动有趣,又增加了用户的好感,给人留下深刻的印象。
3D立体图标设计是近几年来的流行趋势,看上去十分精致、华丽,但是看久了会让人产生轻微的视觉疲劳,同时因其复杂的结构会增加用户的认知成本。一般在外卖美食类应用中比较常见。
1.5 Tab的设计感
Tab是App设计中最常见的控件之一,它源自Material Design的设计规范。现在很多iOS产品当中也开始使用这种导航栏样式来进行设计,而原本属于iOS规范当中的分段选择器变得不那么常见了。
在视觉表现形式上,Tab和标签栏同样也分为选中态和未选态,它的设计较为简单,通常是使用一组文字标签,通过颜色或在标签下加上小长条来区分两者的状态。因为它简单,却越难设计出彩,要发挥极大的设计想象力,跳脱出设计规范的限制,才能找到完美的方案。例如虾米音乐的Tab选中态是一段音频波线,再配合文字的大小对比,一个富有设计感又符合产品特征的Tabs就被创造出来了。
我们还可以从品牌基因中获取灵感,品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条,这样就建立起视觉上的联系,让用户产生由内而外的一致感受。例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上,既让界面视觉,又进一步强化了用户对品牌形象的认知。
1.6 无框设计 去繁从简
在UI设计中,有许多的装饰元素,如卡片的边框、列表的分割线等,虽然边框,分割线是分隔两个元素的好办法,但是它不是唯一的方法,使用过多会让整个布局的设计感降低,或多或少都会干扰用户浏览的视线,让信息内容失去注意力,因此可以减少不必要的装饰元素。我们可以通过以下几个方法来划分元素的视觉层次,让画面变得干净,整齐:
使用阴影
阴影同样可以营造出边界感,而且相比边框分割线更加微妙,并不会显得突兀,不会分散用户的注意力。
使用不同的背景色来区分
通常,相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分。所以,你所需要做的就是在不同的区块采用不同的背景色,并且尝试删除分割线,因为你根本不需要它。
增加额外的留白
创建元素之间的分离效果,并不一定要通过线框来表现,只要增加留白,让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。
1.7 统一设计元素
在App中的每一个界面都有许多元素,那些同类的元素应保持统一的设计样式。通常个人中心的标签栏图标是一个人形剪影,它代表着用户,因此可以在展示用户头像和用户形象的界面中延续使用。如果图形拥有独特的外观,如椭圆矩形,也可以作为视觉符号的一种,延续到其他界面中,成为图形或按钮的外观。这样,整个界面就被统一的设计元素联系起来了,给用户始终如一的一致感。
1.8 符合产品气质的字体
选择符合产品气质的字体,可以与产品的定位相吻合,传递给用户正确的情感意识。虽然默认字体可以满足大多数App 的设计需求。但会出现一个问题就是,系统字体的普适性并没有什么特色,在一些特定的情境下就显得收效甚微。例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉,换成系统字体后,整体感觉在气势上就变弱了很多。
1.9 第三方图标风格统一
大多数App都支持三方登陆,他可以减轻用户注册的时间成本。通常是在注册登陆页的底部展示第三方图标入口,这也是设计师最常忽略的内容,往往是直接将第三方图标调整一致大小和摆放整齐位置,没有针对它们再设计。一个设计精致的App不应漏过任何的细节,我们可以以自家App的图标风格为依据,对第三方图标进行优化设计。
1.10 图片中寻找色彩
App中优美的图文设计,能带给用户如沐春风的视觉享受,它非常重要。我们经常看到文字叠加在图片背景上的设计样式,为了减少复杂图片背景对文字的干扰,通常的做法是叠加半透明度的黑色蒙版,让白色文字清晰可见,但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色,这样就使文字、色块和图片融入到一起了,画面变得高级和富有设计感。
1.11 提高图片质量
图片的质量影响着整个App的格调和用户的情绪,高品质的图片给人愉悦的视觉享受,产生美好的联想。而低品质的图片会瞬间拉低App的质感。在App设计中,一张漂亮的图片从收集到上线,需要经过裁剪,调色等过程才能被使用。即使是普通的商品图片,我们将它抠图后调整成统一大小,再加上干净的背景,就能立刻提升商品的美感,界面视觉也会变得美观、整洁。
1.12 卡片式设计
现在的UI界面设计中,卡片式设计已经是一种非常常见的设计形式,它有利于信息分层和整合,划分出更加清晰的组织结构,实现复杂内容的简化处理,提高空间利用率。同时卡片式设计通常很依赖视觉元素,很强的视觉元素正是卡片式设计的一种优势,也是提升设计品质感的良方。
2、情感化设计
心理学认为,情感是人对客观事物是否满足自己的需求而产生的态度体验。只有当产品触及到用户的内心时,使他产生情感的变化,那么产品便不再冷冰冰,他透过眼前的东西,看到的是设计师为了他的使用体验,对每一个魔鬼细节的用心琢磨,人们会产生愉快、喜爱和幸福的情感。情感化设计并不是轰轰烈烈,有时候仅仅一句文案、一幅插图、一个动画就能打动人心,使用户获得愉悦的使用体验。让设计变得高级不仅仅是视觉层面,这些简单而美好的设计细节充满了积极情绪,它是满足产品的功能性和易用性之后,追求更高层次的目标。
2.1 提示性文字
语言是情感化设计最直接的利器,拟人化的对白相比冰冷的话语更能获得用户的好感,赋予产品的新的生命力。例如App那些push推送通知,因为用户每天收到的PUSH实在是太多了,早已心如止水!这个时候,你就需要一条成本低、效率高的PUSH文案,去撩动用户主子们的心。将原本对用户的打扰变成一种逗趣,让人看到会心一笑。
2.2 下拉刷新
下拉刷新是用户在App使用中经常进行的操作,常见的下拉刷新设计是图标加文字的形式,这种设计简单、直观,但毫无设计感,不能引发用户任何的情绪。
下拉刷新是一种临时状态,丰富它的设计细节不会造成与产品界面的格格不入,相反,一个富有设计感的下拉刷新设计能让产品获得用户的好感。例如uc头条在下拉刷新时会蹦出一只奔跑的小鹿,暗示正在快马加鞭的加载新内容,小鹿形象延续了品牌logo。作为资讯类产品,内容更新速度至关重要,奔跑的小鹿正好隐喻了这一点。用户也在这种快乐的情绪中对产品产生好感,瞬间就让下拉刷新变得生动有趣。
2.3 头像设计
个人中心页与用户信息密切相关,用户的虚拟形象在这里得以展现,常见的设计是一个用户头像加登陆文字的形式,这种默认的头像设计无法得到用户的认同感。
现在很多的产品已经放弃了死板的默认头像,给用户更多的选择。赋予产品一些人格魅力,可以让产品富有生命力,消除人机界面的冰冷交互,帮助用户和产品建立友好的联系。例如美团外卖和躺平,它们各自的身份都代表了产品的气质和用户的属性,让用户产生一种身份的认同感。
2.4 缺省页化解负面情绪
通常状态是,当前页面没有内容或无网络状态下出现的页面。常见的设计是图标加提示文字的形式,这种简陋的设计会给用户心理造成很大的落差,陷入负面情绪中。情感化设计在此时就可发挥巨大的作用,它通过设计手段来减轻用户在看到一个毫无内容的界面时所产生的挫败感。 设计师可发挥的空间很大,根据产品属性和品牌延展图形,结合动效或插画等情感化设计,可以很好的丰富页面内容。例如躺平的空白页呈现出一种贱萌的场景,让用户会心一笑,使产品充满了趣味性。
2.5 标签栏微动效
情感化设计变得越来越丰富,图标设计上升至可以展示动画效果。通过动效的使用,标签栏切换变得不再死板。用户在频繁切换页面时,不再觉得单调。精心设计的动态效果,能够缓解用户等待时焦躁的心情,从心理上缩短用户等待时长,让品牌更加深入人心。
2.6 模拟用户行为
如果一个产品可以模拟用户的行为,将用户代入真实的情境中,用户就会对产品产生深刻的认同感。例如「潮汐」会根据时间场景和季节变化,播放不同的背景音乐来营造氛围。雨声、雷声、风声、潮水声等让人时刻感受到身临其境的情境。
情感化设计可以拉近用户与产品之间的距离,在更深的层面体现出对人性的关怀,为人们带去情感上的愉悦和感动。洞悉用户的行为,换位思考去满足用户的需求,情感交流就产生了。例如当你截屏了一张图片,打开微信对话框时就会自动显示这张图片,提前预知了你发截图的需求。
再例如很多观众都习惯了在电影结尾等彩蛋的习惯,因为很多时候坐在影院等彩蛋却等来没有彩蛋的结果只能白白浪费了时间。在「淘票票」上购买电影票时,你会发现影片详情页会有彩蛋提醒,告知你电影是否有彩蛋且彩蛋会出现在影片的什么位置。有了这个提示信息,就不必再为了不确定的彩蛋期待浪费时间啦。
2.7 有趣的细节设计
俗话说:有趣的灵魂万里挑一,可见有趣是可以引发交流进而让人们产生积极的情绪。 在UI设计中,有些有趣的设计是隐形的,需要用户自己去发现,当用户找到这颗彩蛋时,就会获得一份喜悦和乐趣,增强用户对产品的探知欲。例如在电脑端打开B站的鬼畜区长按这个返回图标10秒左右,你会打开鬼畜区的新世界(⊙o⊙)(友情提示:记得戴上耳机或调小音量)其实长按「返回」10秒后网页下方会出现一条黑框提示「尝试输入字母,发现鬼畜秘密」。按照提示乖乖输入字母就会出现鬼畜明星划过你的屏幕!
有些有趣的设计又是显性的,目的是让用户与产品引发交流从而产生积极的情绪。例如成为优酷视频会员,不仅可以尊享丰富的影视资源,还能让自己的ID在发弹幕时使用剧集相关角色的头像。带角色扮演头像的弹幕,让发言更有剧集代入感。这个彩蛋的设置一方面强化了会员身份的尊贵感与特权性,一方面也丰富了弹幕区的多样化,可谓一举两得了。
文章来源:UI中国 作者:漂浮柠檬核Fyin印迹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在做设计的时候,经常会遇到一个问题,就是一个按钮,在同一页面的不同情况下,有时可用,有时不可用,我们到底是显示不可用时的禁用状态呢?还是直接隐藏这个按钮呢?
大家还是喜欢提这种通用性问题,希望有一个说法,可以概括所有情况。但我多次说过,不存在这样的好事,一定是具体问题具体分析的。
尤其是这个问题,想要聊透彻,得用不少例子来举证说明,不过也可以通过总结的方式长话短说了。
禁用按钮的使用,可以从两个维度来分析,分别是:「无效的禁用状态」和「有效的禁用状态」。
有一种情况是,在一个页面里,一个按钮,可能会有几种不同的情况存在。那人要问了,既然是一个页面,为什么会有多种状态同时存在的情况呢?
比如,在出行场景中,普通乘客发起订单,司机接单后是可以发送消息的(左图)。但是从第三方渠道来的乘客,司机是无法发送站内消息的,只能通过电话联系乘客(右图)。
不同渠道来的用户,司机端的页面会呈现不同的按钮状态。相同的页面,第三方渠道来的乘客,在司机端就不需要露出消息按钮了,这样可以减少无效信息对司机的干扰,还可以避免司机习惯性操作带来的无效反馈,比如点击消息,显示「无法发送消息」。或者显示禁用,也会影响司机的操作判断。
从这个案例中我们可以看出,当一个按钮在某种情况下始终无法被触发时,就会选择让它直接消失,而不是呈现禁用状态。
很多人在这类设计里会给按钮提供一个禁用状态,以免按钮消失而打乱页面布局。但是要知道,在某种情况下,按钮无用时,无意义的展示反而会产生干扰信息,就像上面说到的那样。
所以这里有一个结论是:禁用按钮需要可触发的时机,如果没有这个时机,禁用状态就没有存在的必要。如果存在,那它也是一个无效的状态。
既然是无效的,最好就不要出现了。
在上面的例子里,有一个前提不可忽略,那就是司机是否可以理解我们不显示的原因。当然,司机会接受相关培训,产品中也会有渠道标识,所以司机能够明白页面中存在的差异。
但在其他产品中,当状态不同,按钮变化无法自洽的时候,又怎么去处理呢?我们就需要通过合理的解释来消除用户潜在的困惑。
对于这点,比较典型的案例是在线上购物时,一件商品会有多个类型供消费者选择,比如不同的尺寸、型号等,当其中一种类型被抢光时,这个商品依然是可见的,只是无法选择,展示出了禁用状态。
在这种场景中,我们不能一下子把其他无法购买的类型隐藏,因为用户需要知道我们所有的商品类别,了解商品的全部属性,尽管当下无法购买,但有上新的可能,用户依然可以选择等待,并将其加入收藏,还是会有机会促成这笔交易。而且当可选类型变多的时候,只是禁用没有库存的类型,可以使其他可选项保持固定的位置,有利于我们二次搜索和加购。这种场景的禁用也是暂时的,直到商品下架或者上新。
但就像我以前说过的,常常我们见多了的东西,就认为是正常的,但它并不一定好的。禁用也是这种情况。
虽然我们现在还是会在各个地方看到禁用操作,但是禁用的原由始终没有给到用户合理的解释,以至于许多人见到类似的操作都是一头雾水。所以在设计过程中,尤其要谨慎对待,尽可能的避免出现无法解释的禁用操作。
好比淘宝的商品选择页面,如今也将原来的商品纯禁用按钮,替换成了「缺货」。选择缺货的商品之后,按钮会变成「提醒掌柜补货」。
从原来的用户单方面接收无法点击的按钮,到现在直观显示缺货,点击后同时提醒到商家,这样的操作从功能角度来说是一个升级。
这就是我说的,有效与无效的禁用按钮之间的区别。禁用不该是真的禁止使用,而是告知用户,它如何可被使用。
如果一个按钮在不同的阶段有禁用和可用的状态显示,那么意图是很明显的。比如一些活动页面,某个按钮的禁用状态是倒计时,就像电影的前期宣传,为电影的上线制造话题和热度,来鼓励更多人的观看一样。
对于按钮来说,显示禁用则代表它在满足一定条件后即可拥有可点击性,让我们明确地了解它就在这里,未来是可操作的。按钮也有很多的设计空间来为未来的使用做好铺垫,特别是营销类的活动,像是「明日 8 点可抢」、「提醒商家补货」的按钮文案,无一不在传达「可用性」的信息,引导用户持续性的关注。
但是还有一类禁用状态只是静默地提示,多出现在表单中,当用户没有完成输入的时候则无法点击,因为看的多了,我们就以为这是正常的。但我们都知道它仍可优化,比如,在它以禁用状态出现时,用更为友好的方式去提醒用户应如何激活,而不是漆黑一片,且完全不知道它所存在的意图。
我们要知道的是,禁用按钮本身不是一个特殊的对象,只是禁用状态在页面中是一个特殊的存在,它是产品设计中的一种规则。为什么按钮不可用,或者说一定场景下为什么功能不可用,当无法依靠用户直觉理解的时候,是需要作出解释的,也就是怎么禁的问题。
但是最开始设计时就应该去想的是,禁用状态对用户和产品的意义在哪里,这和我们设计方案时脑海中涌出的无数目标一样,是一个基础的出发点。而后,一切迎刃而解。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读:产品经理在进行产品功能规划时,会遇到来自各方的需求。这些需求有大有小,有迫在眉睫的也有无关紧要的,应该如何规划产品功能呢?本文将从四个方面展开分析,希望对你有帮助。
产品功能如何定义?
一款产品一般会具备一定的盈利点(商业变现能力)、其独特的使用价值,偶尔还会掺杂个人创作时的产品情怀(初心),像锤子科技入场手机行业的时候,是定位于年轻小众的用户群体,为他们提供个性观感的用户体验,虽说后来败北了,但也曾收获了一批用户的喜爱,也有因为这个领域始终存在着它的壁垒,所以不是简单的情怀就能做成一款好的产品。
当然,如果不是创始人,创作的情怀可能会体现的没那么深刻,但是产品早期的定位在一定程度上已经确定了基础的业务方向和发展的基调。
很多企业可以靠一款核心产品,进而延伸到其他的产品创造,基础产品实现了赚钱能力后,从而支撑其他的产品的试水,即使失败,也不至于“关门大吉”。
而当产品经理切入产品设计时,一般有我们常用的两种产品类型,一种是基于基础核心业务延伸的从0到1的项目设计,一种是处于生命周期-成长期中从1到N的产品迭代。
而这2种规划产品的功能的方式也是不一样的。
不管是哪类产品,立足点都是基于需求,而需求池也分2种,一种是源源不断的需求池,一种是寥寥无几的需求收集;前者更为切合从1到N的产品,上线后的需求或反馈都是来自真实用户的声音,包括主动的从现有的产品进行回访、用户调研以及通过用户的反馈和建议收集有效需求。
有了需求,那是最直观的,对应的产品功能可以根据此展开进行规划。
而第2需求类型,常常是因为局限于没有经验,不熟悉不了解所以需求的声音很少,这时候,产品经理就需要主动的去对比竞品,去分析竞品,解析出产品的核心需求,并且去了解这个产品的一个市场背景、规模和场景范围了。
当然,竞品分析不是让你全部照搬抄写别人的产品,这是没有灵魂的,作为一个产品人,是需要有自己的想法的。B端产品的分析,更加倾向于功能模块及逻辑设计,而非用户体验或界面的细致优化。
从0到1的产品功能规划时,要明白企业是属于某个行业的,而行业的范围比较广泛,比如做教育的,器材可以属于教育装备的一种,教务管理系统也可以属于教育装备的一种。另外,书籍、校服、桌椅等面对的对象是学校的,他们也可以说自己业务涵盖了教育领域。
所以,我们设定或规划一种产品时,往往都是有关联性的,而不是完全切入一个新兴的领域,撸起袖子就干。
当然,有能力的并且有钱的企业是可以这么做的,但是对于门槛较高或需要积淀的领域,他们也不会贸然动手,起码会先观望一下,然后找一找这个领域内的老玩家,通过合作的方式获得了经验值再自己独立做,但是做肯定是不会做相同的事情,老的市场被吃透了,这时候只有把新的东西注入,才能获得一些收益,比如把自己独特的优势、互联网观念或用户个性化体感的设计再应用到传统的制造业中,摸清了其壁垒及门道,才能走出自己的道路。
场景是功能使用的具象化,主场景作为该功能的一个核心定位。如做一款访客产品,定位于通用性产品,你将考虑到其面对的对象,包括:
用户群体则可以细分:
调研竞品后,也分析了产品的使用对象及场景,这时候可以提炼和列举出核心且必要的功能,分析并讨论,这个时候一般是产品经理之间的相互讨论及推敲,可以先个人提出自己的方案进行比对,再去重择优,一个个将一级和二级的功能模块确认下来(也可以是3级,视具体情况而定),将整一个产品框架定下来。
思维导图的使用和场景使用也是相辅相成的,此类场景是基于主场景下的细化。如,对于访客来说,他去拜访用户,是否需要提前预约,如果没有提前预约,现场登记的方式和提前预约的方式有什么不一样,这样就可以确定下来,两种方式:预约和现场登记。那预约又可以包括访客H5扫码主动登记或者企业邀约申请等等。
功能模块确定后不要急于去画原型图,因为更重要的一步还是整理整个产品功能之间的关联性,即产品数据的来龙去脉。
流程可包括业务流程、限制流程、前后端交互流程图等。以下图进行例举:
为业务模块核心的工作流程,数据流向及基础判断,及业务的几种模式都可归属为业务流程,涉及的模块和功能一般是自己的模块属内。
如在增删改查的过程中,对数据的一些限制和参数判断后的不同流向,往往是由多个模块之间的规则限定的,涉及到不同模块之间的关联性较强的说明。
数据传输的起点和终点。一般软件包括前端和后台服务器,后台主控数据的管理和分析,通过后台对前端应用进行管理,常见的为数据的上传下发和命令的顺序的判断。此流程图着重对数据前后端的交互及整体流程的绘制。
基于以上都整理清楚之后,就可以开始进行原型设计了,原型的布局和风格可以根据现有软件或UI专业的建议进行设定,对于B端产品来说,布局和排版对功能影响不是很大,即使从0到1,也可参照市场常见的布局或根据公司规定的统一。而风格和产品定位尽量贴合,假如你做一款小清新的APP,就不要使用暗黑风格的调调了。
这就是今天篇文章讲的,之后会分享一些关于功能规划时的一些细节点。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
引人注目的UX设计背后的心理学
每天,您都会在线访问多个网站。他们中的一些给人留下了积极的印象,而另一些则使您在数毫秒内按下了后退按钮。您最终从一个网站购买了产品,而不是从竞争对手那里获得了产品。是什么引导这种行为?您为什么对某些网站感到满意却却避开其他网站?
这样做的主要理由之一是在用户体验设计中实施心理学。您喜欢的网站聘用的UX专家知道如何在与网站交互的每个阶段触发心理反应。在线心理学的使用是成功的,因为我们在人类生存的几个世纪中获得的某些进化特征在我们每天与世界各地的互动中仍然发挥着重要作用。
本文介绍了一些常见的UX元素以及它们背后的心理思维。
有关服务或产品的建议
例如,当您在机票预订网站上时,会在预订完成之前或之后获得有关酒店,餐厅或旅游选项的建议。在许多情况下,如果价格足够诱人,人们就会继续预订酒店或在餐厅预订。当您搜索抵押贷款时,同样适用,并且您还会获得有关债务管理或退休计划的建议。
图片:Skyscanner
这是一种称为“预期设计”的UX创意。目的是根据您在网站上查看的内容来建议您最可能需要的其他内容。这个设计思想是基于当我们在互动中感到被理解时更快乐的心理原理。这在所有领先的电子商务门户网站上也可以看到。
图片:Flipkart
这种UX设计的一种变体是在许多网站上延迟显示弹出框以进行加价销售或潜在客户。这也是可以预见的,因为它基于这样一个事实,即许多用户直到从站点上花费的时间中获得了一定的满意,才会对弹出框的内容不感兴趣。
显着性原则是另一个鼓励用户体验设计决定的心理原则。它说人们将注意力集中在当时与他们最相关的事物上。因此,正在寻找飞往夏威夷的廉价航班的度假者将很高兴看到提供经济实惠的住宿,甚至为他们的旅行提供融资选择。仅登陆页面以读取症状的用户将仅关注页面的内容,而不关注订阅弹出窗口。
限制用户选项
您选择的网站比强迫您跳过五个菜单来查找相同内容的网站更容易找到。这是因为我们发现很难做出决定时,有太多的选择。这是基于希克定律的心理原理:选择的负担。
图片:Apple
最好的UX设计人员了解这一点,并确保用户可以找到所需的信息,产品或服务而不会感到不知所措。
抢眼设计
图片:例如葡萄酒
如果网站或应用程序的设计精美(根据用户的描述),则立即导致对品牌的有利倾向。这是一种心理原理,称为审美可用性效应。如果您的网站漂亮,那么普通用户就会相信它比同一个利基网站的其他功能更实用,更值得信赖。关于吸引力的这种偏见也可以在离线状态下看到,因为研究表明,更具吸引力的人被认为比其他人更有能力和更友好。
此外,引人注目的设计可能使人们忽略网站或应用程序上的其他缺点。顶尖的UX设计人员花费必要的时间来获得任何项目的最佳美学效果也就不足为奇了。
醒目的颜色口音
图片:Paypal
诸如Trustly,PayPal,FreshBooks之类的品牌,以及您日常遇到的许多其他品牌都使用颜色强调点,以使您的眼睛指向CTA按钮,注册表格等。网站上的主要颜色为蓝色时,它们使用绿色,红色或黄色来表示突出这些区域,它会起作用!这些网站的任何访问者都可能会错过页面上的其他内容,但会看到这些部分以独特的口音仔细突出显示。
这是基于赫德维格·冯·雷斯托夫(Hedwig von Restorff)的心理对比原理,即人类更容易记住那些与其周围环境脱颖而出的东西。有趣的是,没有颜色被认为是最有影响力的。UX设计人员只需确定主导的颜色主题,并使用不会混入背景的另一种颜色作为重点选择。
产品差异化价格计划
这也称为“金发姑娘”定价技术。企业使用这种技术来销售“中档”产品。当您四处寻找虚拟主机计划时,您可能会看到更多。提供商通常列出三到五个订阅计划,并将中间计划突出显示为“受欢迎”或“热门”。
图片:Acowebs
许多人立即分析出最昂贵的计划和最便宜的计划,最终选择了所谓的中端计划。这是因为他们将其视为最高价值计划和入门级计划之间的完美中间地带。有趣的是,这些中端计划的价格没有像其他任何人一样受到严格审查,这使得它们成为提供这些品牌的品牌中最赚钱的。
这种定价技术之所以有效,是因为它基于取景的心理原理,该原理强调了人们在做出购买等决策时如何避免极端情况。它还显示了选择的呈现方式如何影响决策过程。
其他领域的更多用户体验设计师正在采用这一原理。现在,各种电子商务商店都提供多层定价结构或提供价格不同的相似产品。大型科技品牌也不例外。他们可能是这一原则的最大受益者之一。因此,下一次您发现自己忽略了中端选项规格,规格稍高但仍低于最贵机型的三星Galaxy设备时,您就知道了!
这是另一个例子。
图片:SEObirth
限时优惠
电子商务网站已经完善了使用限时报价创造产品需求的技巧。一些品牌会声明要约/产品“仅在接下来的X天内可用”,而其他品牌如亚马逊将显示详细信息,例如“仅剩5个库存”。无论哪种样式,两种策略都旨在引起您的相同反应:紧迫感,因为该产品很快将不再可用。
图片:亚马逊
这是基于稀缺性的心理学原理,该原理指出,与到处都有的物品相比,我们倾向于更加重视稀缺或不可用的物品。一个1975年的研究证实了这一原则。研究人员将相同类型的曲奇放在两个罐子中,但是第一个罐子有10个曲奇,而第二个罐子只有两个曲奇。研究参与者对第二个罐子的评价高于第一个罐子。
研究还发现,人们对以前丰富但现在稀缺的产品的评价要比总是稀缺的产品更有价值。经济学专业的学生不会对此感到惊讶,因为可用性的下降总是会触发需求的增长。
除电子商务网站外,其他具有在线形象的品牌也采用稀缺性原则。出售在线课程的企业家强调诸如“仅适用于前10名学生”,“一周内结束”之类的术语。其他人则为采取特定行动的人们提供独家利益,例如提交电子邮件地址,支付服务费用等。 。
当品牌试图销售“限量版”产品时,该原则也可以在离线营销中看到。
UX设计师之所以采用这种技术,是因为他们知道,即使产品或服务没有迫切需求,人们在产品或服务稀缺的情况下也会注意。
推荐书的战略定位
图片:ElegantReports
有没有想过为什么许多产品或服务网站的主页上都有推荐?为什么在做出购买决定之前总是要寻找推荐?这是因为社会证明的心理学原理。
当我们对任何事情都持怀疑态度时,我们会寻求同行的指导。这就是为什么您会发现人们在选择公司之前先在社交媒体上要求评论特定品牌的原因。在1969年社会科学实验强调了这一先天行为。研究表明,如果已经有足够的人参与,人们至少可以说服人们注意某些事情。
除了推荐之外,UX设计师还通过炫耀可信赖的从属关系(例如SEO专家从事的业务或以作家为特色的博客)来结合社会证明原则,订户数量,帖子中的股份数量以及产品的等级或服务,甚至获得的奖励数量。
图片:Acodez
电子商务商店通过显示名为“客户也已购买的商品”的部分来使它更进一步,以突出显示可能会使用户感兴趣的流行产品。
突出赠品
图片:皮特和佩德罗
如果您免费提供某些商品,在线用户现在或将来更有可能从您的品牌购买商品。这是基于互惠的心理原理。这就是为什么许多UX设计师强调任何交易的原因。
如果您要购买新鞋,则更有可能选择在其网站上提供“免费送货”的品牌。同样,您也可以在提供免费指南或免费咨询的登录页面上提交联系方式。
UX设计师结合对比和互惠的心理原理来创建高度转换的页面。
结论
达到既定目标的引人注目的UX设计并非偶然。最好的设计师知道,在线成功的关键是要吸引一般用户群的基本本质,他们会运用心理原理来实现这一目标。人类的在线行为是可以预测的。结合心理学和用户体验设计,您的品牌可以产生更好的结果。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com