首页

关于无障碍设计的研究分享

ui设计分享达人

大纲

1、研究背景

2、案例分析

3、无障碍设计工具推荐



在特殊的场景下所有人都存在残疾

一听无障碍设计就觉得可能和残障人士有关,其实不然;除了先天或后天出现的眼盲;耳聋的这种:永久性的障碍。在正常人身上也存在着情境式障碍;暂时性障碍;例如:


提着大包小包的你,想使用手机—情境式的肢体障碍

在喝热粥时,雾气遮挡住的眼镜—情境式的视觉障碍

骨折的腿无法正常行走—暂时性的肢体障碍

刚睡醒迷糊的你—暂时性的认知障碍

 ……


所以即使你是正常人,在日常使用产品时也会受到和残障人士一样的局限性。而大家说的用户体验设计其实就在特定场景下解决给特定的人群产生的局限性。



城市无障碍坡道


先普及一个概念(curb cut effect)直译过来就是“遏制分割效应”,其实意思就是机会共同体的概念、弱势群体受益的法律和计划往往最终使整个社会受益;最普适的就像是路缘处会做临时的斜坡处理,目的是为了帮助坐轮椅和推荐不便的人出行顺利通过,但是实际上,对于推着婴儿车,和行李箱的人同样受益。


傻傻分不清楚的洗发水和沐浴液

为了统一品牌设计语言,往往会将洗发水和沐浴液的瓶体设计成一样,不仅是视障人士,任何人在闭上眼睛洗头时都分辨不出来。花王在1991年在瓶身做锯齿状处理用来区分两个产品,通过触感也可以轻松辨认。

原文传送门:シャンプーのきざみに込められた思い


接下来就是软件端的案例,软件产品在无障碍设计的例子上也很多。


哈啰出行-司机端

哈啰出行的司机端,在司机开始行程后,在司机端进行操作,APP会进行类似于IOS VoiceOver的语音播报,就是对你点击的位置做中文的播报,规避对情景式障碍的分神的危险。


滴滴-老年版

滴滴打车首页的“老人打车”,除了对布局的简介化,对字体的放大化,还可以设置常用地址然后一键打车,或者通过电话联系客服叫车,还是比较方便的。、对于60岁以上并通过实名认证的用户,如果终点是医院等特定目的地的话,后台还会优先派单,为老年人提供救急服务。


无障碍设计工具推荐


检查色彩对比度

色彩对比度意为:【识别对象】和【其背景颜色】之间的对比度,对比度越高,越清晰,对比度越低。越模糊。如把重要的文字信息的对比度设计到AAA.次级的文字信息的对比度设计到AA。 把色彩对比度量化的话,可以计算出比例值,最低1:1(黑底黑字)、最高21:1(白底黑字)。

最权威的互联网无障碍规范 —— WCAG2.1(Web Content Accessibility Guideline,Web内容无障碍指南

对比度量化工具:点击这里

对比度cheome插件:点击这里


Funkify - 残疾模拟器


通过极端用户的视角来体验网络和界面,包括视线模糊、对比度下降(所有人的视觉对比度都会随着年龄而下降)、杂色、白内障、糖尿病视网膜病变等。

残疾模拟器cheome插件:点击这里


屏幕阅读器

用于在 Chrome 浏览器中朗读内容

屏幕阅读器cheome插件:点击这里


Color Oracle-色弱;色盲模拟器

支持Mac / Win / Linux。大约8%的男人和0.5%的女人有色盲或色弱、是相当大的族群。当然,UI中不应该只通过颜色来区分信息,但有时无论如何会用到色彩区分(比如数据可视化),那么就一定要使用色盲友善的配色方案。一般来讲,蓝/黄、蓝/橙是比较万用的搭配。

色盲模拟器工具:点击这里


总结:


虽然在现实的资本市场不太会在边缘人群身上花那么大的资源,但是体验设计存在的意义不就是为了解决各种因素给人产生的局限性么。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:你听得到____

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


B端产品界面高屏效初探

ui设计分享达人

背景

在 B 端设计领域中,不管是内部用户、产品、设计师、开发,还是外部产品、设计师等,总能听到关于界面「屏效」方面的诉求或吐槽。


undefined


「屏效」狭义理解是「界面过度留白」;广义理解,「屏效」源自谐音“坪效”,指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数)。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。


为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感,于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开,将实践过程中反复验证有效的设计策略沉淀成设计手册,同步将部分功能进行工程化,确保可以开箱即用。


undefined


探索阶段-为谁在何时何地设计

用户声音|不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%;认为提升屏效对体验有提升的终端用户占 50.6%。


undefined


外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里,其中就有 2 点提到关键字「效率」。


undefined


通过了解不同用户和产品类型发现,不同的用户在工作场景的产品使用中有着相似的特征:


undefined



案例收集|发现问题,大胆假设

纵观 B 端产品界面,发现普遍问题和收录在解决屏效问题上实践得比较好的案例,为了逐步突破问题,选择以数据产品中覆盖率极高的表格为设计切入点,通过线上跨产品多端地毯式的体验走查,发现表格三个层次的问题:


undefined


视觉、交互层在无需理解业务场景和用户目标的情况下,都较容易发现,属基础问题,但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设:为提高屏效,可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度,可以通过提高信息密度;交互层为提高操作速度,可以缩短当前手势到目标之间的距离;信息层为提高信息被理解的速度,可以通过重组织等方式。

基于假设,我们进行了进一步的桌面研究,查阅论文等书籍,寻找设计理论的验证和指导。


竞品分析|寻找实践证据,谨慎验证

我们知道视觉上界面留白过多(过疏会增加滚屏成本,过密因易串行而影响阅读效率),以表格「行高」为例,探索各表格在字号、字高和行高的关系,因为不同字体的同字号实际像素高度会有差异,因此选择的是字高(即文字垂直高度的视觉大小)而非字号或字行高,决定留白的两个重要因子是字高和表格行高,以次推演,界面元素和元素间距的留白关系,探究在视觉层怎样的留白率能保证甚至提升屏效。


undefined


以数据产品中的表格为例,通过直接和间接竞对的方式,分别从数据的查阅(视觉)、分析(交互)维度进行功能点和设计细节上的比对,来看看优秀产品是如何解决屏效问题。

直接竞对:内部用户口碑较好的产品 A、B外界竞对:同领域的 Tableau、网易有数、金山、微软表格;间接竞对:谷歌邮箱、AntD 等的紧凑主题的常规列表(一维表格)


undefined


通过竞品分析可以发现,数据分析领域的表格留白率普遍较低(信息密度高),尤其是金山和微软的电子表格,其次是同类面向数据用户的 Tableau、网易有数,而谷歌邮箱等工作台常用的常规列表紧凑版本中,留白率和数据领域的电子表格不相上下。


紧凑版的使用场景也常常是面对数据量巨大的信息呈现,通过切换紧凑主题,提升信息的快速浏览,而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大,而在实际案例实践中,也已经将表格行高优化至 30px,克制的使用留白。


除此外,竞品其他层次的设计也做了比对,总结来看整体设计做法:高密度、少屏数、少留白等。


文字陷阱:中英文字高不等于字号


举个容易犯错的竞品参考是,谷歌在紧凑版主题下字号 12px,列表行高是 28px,但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤,缺乏呼吸感。


undefined


原因在于谷歌的 12px 是英文字体,实际字高只有 10px,而 AntD Table 的语境是中文字偏多,实际字高有 12px,所以留白的差异在于一个是 18px(28-10),一个是 16px(28-12),这也是为什么决定决定留白的两个重要因子是「字高」和表格行高,而非「字号」和表格行高,进一步推演,决定界面留白的是「元素视觉高度」和「元素间距」。


论文查阅|寻找理论证据,谨慎验证

研究表明,低密度认知负荷低,但高密度任务完成率高,用户更喜好

参考资料:论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息,用户需要需要阅读(视觉),思考和理解(认知),需要点击按钮、操作鼠标和打字(行动),在人机工程学中,统称为负荷。即认知(记忆)负荷、视觉负荷、动作负荷,即分别对应用户体验设计的三个层级,信息/视觉/交互。而负荷所花费资源从多到少依次为:认知 > 视觉 > 行动。


认知负荷,举个例子,看了但不一定懂了。你是否有这么一种体验——刷抖音,虽然很多(信息密度小,输出效率低),但可以一直刷下去并且刷很久;而看一门 C4D 教学视频,即使就短短十来分钟(信息密度大,输出效率高),但是却要看上半天。因为刷短视频时,你的输入效率远高于作者的输出效率,而看一门 C4D 教学视频时,你的输入效率远低于作者的输出效率。可是,输出效率是客观的,输入效率是主观的。如果输出效率很高,你可以通过提高自己的输入效率(比如让自己成为 C4D 专家)来跟上作者,从而变强;否则输出效率很低(信息质量低),你的输入效率很高(很专业),信息于你而言都是无效的。


假设负荷总量不变的情况下,那么以上三类场景界面需要对用户负担分配大致如下,官网品宣类需要低认知成本,低视觉负担,视觉要求高,用户才会被吸引过来阅读,甚至酷炫的交互更能增加互动体验而带来的趣味感,比如苹果官网,信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息,而 B 端应用因为是专业使用,首先认知方面随着员工的专业度提高而降低,因此可以通过提高视觉负担,来降低行动负担,进而减少操作用时,当然最佳情况是三个维度能整体降低负担,让总负担降低,就需要更多设计巧思了。


undefined


面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中,设计师常用的 Top 3 做法为:【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。


undefined



实践阶段-如何设计

通过以上的探索,我们可以确定的是,B 端产品面向专业人员的工作界面设计中,提高屏效可从视觉、交互、信息三个层次进行,视觉层-高密度,即提高屏幕信息密度;交互层-低跳转,通过减少页面跳转、手势与常用操作的距离等;信息层-有效性,通过重组织或辅助信息帮助用户理解,甚至提供帮助手册等以提高用户专业能力。


undefined


基于以上的总结,对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,寻找运营机会点。


如下表格经过高屏效策略优化前后对比图,优化前相同维度下不同人群数量的对比需要视线来回跳动比对,而优化后的表格内容,更符合用户看差异场景下分析目的数据查阅,视线锁定相同维度,即可快速比对数值大小。


undefined


下面以视觉、交互、信息三个层次解剖设计过程背后的思考。


视觉层|高密度-克制的留白

眼动理论:研究表明,人眼最小可视视角 0.3 度,水平最大眼动舒适转动区 30度,垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px,水平视野舒适眼动宽 1200px,垂直视野舒适眼动高 2200px。参考资料:论文《基于眼动交互的用户界面设计与研究》


undefined


如图,缩小表格行高的同时,目标信息之间的眼动距离随之缩短,在眼动舒适区内看到更多信息,便于信息的高效获取。


undefined



交互层|低跳转-高频信息前置

理论基础:菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型,它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为:T=a+blog2(D/W+1),W为其中目标的大小;D为到目标的距离;T为移动到目标所用最短时间。参考资料:菲兹定律


undefined


表格单元格借助交互状态,增加悬浮出现的信息组件,前置显示目标单元格明细信息,同时通过交互出现的指示器辅助行列信息的获取,高频操作考虑手势位置放置,缩短与操作目标的距离,以提高整体操作效率。


undefined



信息层|有效性-信息重组织

理论基础:交互设计四大策略「组织、删除、隐藏、转移」参考资料:《简约至上》


undefined


用户为了对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,但内容的重组织方式让两数据行需要频繁点击滚动条来查看,根据用户目标,将关联性大的数据放置相邻列(即将要对比的人群放置列头),即可快速查阅,减少眼跳距离。


undefined


结语

设计趋势中常见的大字体大留白界面,但在 B 端场景中,面对紧张的工作节奏,时间和注意力变得尤为可贵,相对而言,基于复杂度守恒定律, B 端信息量大且高频访问的产品中,「用得快」要比「看得美」更重要,「高密度」「低跳转」诠释的即是「空间换时间」,少一次点击,少一次跳转,少一份等待,就多一份时间和效率。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:Ant_Design
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



设计模式丨行动号召按钮:如何让用户的点击更加顺畅?

ui设计分享达人

What 是什么

简介「行动号召按钮」是用来号召用户点击的进行下一步的操作按钮/可点击的组件。

例子 蚂蚁金融科技首页的“开始探索”按钮,点击后跳转到一个新的页面进行下一步操作。

undefined


Why 为什么

「行动号召按钮」是在事件操作的最后一步出现的,可以让用户知道当按下此按钮时,当前事件的操作流程已经完成或即将发起一个新的流程,可以给用户一个明确的反馈。


When 什么时候使用

当你需要在界面中放置“完成”、“提交”、“确定”或“继续”等按钮时,可以使用这个模式,一般放置在一系列操作的最后一个步骤中。

使用条件

  • 页面中即将进行下一步操作或最终确认的时候;

  • 需要一个醒目的按钮提示用户结束当前流程时。


How 如何使用

创建行动号召按钮时可以使用平台默认的按钮样式,或者使用更大的按钮样式(注意不能是一个链接),让它在页面中非常醒目,让用户可以快速找到并点击它。

需要注意:

  • 按钮可以放在页面的底部或右边,即任务流程最后一步的下面,也可以是你的平台规范中规定的位置,只要能让用户能够快速找到它就可以,避免用户因为找不到按钮而结束了这个流程;

  • 最好使用文字按钮而不是图标,因为文字能让用户更好的理解,比如像“完成”、“提交”这样的按钮用文字更能让用户理解。


Example 案例

案例一:Google Play商店

用户需求:安装应用

安卓设备上的 Google Play 商店中软件名称右下方的“INSTALL安装”按钮就是一个很好的案例。此按钮放置的位置是软件名称的下方和右侧,周围的空白区域较大,是用户视线最终会停留的位置,颜色是绿色与白色背景形成对比,且尺寸也很大,所以非常醒目 ,用户一眼就能看见并点击它。

undefined


案例二:12306官网

用户需求:查询火车班次并预定

12306官网的首页的搜索火车班次的界面上就使用了强按钮,橙色的长按钮非常醒目,且位于信息的最下方,当一切信息输入完毕后,用户可以立即看到查询按钮并顺利点击进入到下一个页面。

undefined


案例三:App Store

用户需求:安装软件

用户在搜索到软件进入到软件详情页面时,一眼就看到软件名称右方的蓝色“获取”按钮,点击它就可以安装软件,作为整个页面唯一的动作按钮它十分醒目,符合用户的“Z”字形的浏览信息习惯,确保用户能看到它,快速达到目的。

undefined


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:Ant_Design
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



如何搭建 B 端设计规范

ui设计分享达人

一  设计规范的目标


在搭建设计系统之前,我们要想清楚设计规范的目标是什么?使用者是谁?

    ·  目标:保持产品风格统一性提高设计输出效率减少无效沟通

    ·  使用人群:UI交互前端测试。



二  设计原则


设计规范要符合基本的设计原则,否则你的规范会杂乱无章。这里我总结了 6 条原则供大家参考。


    ·  Unity(统一性):页面风格、色彩、布局等要保持全局统一,不可为了某一功能的美观而去破坏整体性。

    ·  Accessibility(易用性):易用是首要考虑的因素,能一步解决的事情绝不两步。

    ·  Proximity(亲密性):如果信息的关联性强,则他们的距离就要相应的缩短,让他们看起来是一个视觉单元;反之,则距离要加大。要让用户对信息的区域划分一目了然。

    ·  Alignment(对齐原则):在界面中,将元素进行对齐,即符合用户的认知,也可以引导视觉流向,让用户更加流畅的阅读信息。

    ·  Contrast(对比原则):对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。

    ·  Repetition(重复原则):相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。



三  框架布局


这里一般采用栅格布局。说到栅格,有好多小伙伴又要再回顾一下知识点了。我今天再把栅格知识帮大家复习一遍,如果之前不是很了解栅格的,拿个小本本记下来,要考~~


栅格布局能够适应各种屏幕尺寸及分辨率,确保整体布局的一致性。


栅格建议使用 1、2、3、4、6 切分布局,可以进行多种布局组合,并在整个设计中保持布局的结构的一致性。


页面中一般采用 24 列自适应网格,你可以使用它为各种屏幕尺寸创建灵活的布局。


边距 Margins、列 Columns、间隔 Gutters 分别是什么?


    ·  边距 Margins:边距是内容与左右边缘之间的空间。控制台内容区的边距选用 8 的倍数为设定值,一般采用 16/24px 的居多。

    需要注意的是:

        ··  减去 margin 后,列在页面区域均分,保证每列的宽度是一致的;

        ··  在区域有 margin 的情况下,划分列的区域不能包含 margin。


    ·  列 Columns:在电脑端列的数量是个常量(24列),每一列宽度的尺寸随屏幕大小进行自适应调整。


    ·  间隔 Gutters:间隔是列与列之间的空隙,控制台产品 gutter 使用固定值也要是 8 的倍数,一般采用 16/24px。


需要注意的是:

        ··  布局的左右两边的分界线 gutter 可以为 0;

        ··  必须保证 column 的宽度是一致的。


    ·  边距 Padding:padding 指一个元素的内容和其边界之间的空间,padding 最小值是 4px,然后其余均为 8px 的倍数,建议值为 8/16/24px。


    ·  内容区定宽:此场景常用于用户欢迎页、结果页等需要将内容区宽度设置为固定值的页面。此时 column 和 gutter 保持不变,根据页面宽度改变 margin 的值。



四  设计风格


4.1  Color(颜色)

色彩内容主要包含基础色(如品牌色、黑色、白色)和功能色(如链接色、提醒色等)。图表配色为单独的配色体系。


在前期制定颜色规范的时候,精益求精的设定颜色,切忌颜色过多。


颜色的状态色尽量用原色进行转换,设置一个合理的变色公式,让所有颜色的状态色都根据这个公式进行转换。例:

    ·  Hover:H不变 S加10 B减5

    ·  Click:H不变 S加20 B减10

    ·  Disable:HSB均不变,不透明度 30%


在设计规范中,尽量把颜色的色值和 rgba 值都写出来(这里是强迫症患者要标的,因为有时候色值完全一样,但 rgba 数值略有不同,虽然效果一样,但是对于强迫症的你来说,舒服吗?)


状态色有 4 状态色:Normal、Hover、Click、Disable


在设定图表颜色的时候,要考虑不同的使用样式(柱状图、环形图、饼图等...),同时也要考虑他的延展性,比如你设定 12 个 chart 色值,在使用的时候按着顺序来使用,当超过 12 个后可以为同一个颜色。



4.2  Font(文字)

设定统一的字体规范,使用非衬线字体在各个操作系统下都有最佳展示效果。


首先,要设置一个字体家族,保证产品界面的最优展示。


例如(仅作为展示,不是建议):font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";


4.2.1  字号

现在主流的产品中,主体字为 12px / 14px 的居多,可根据自身的产品定位以及用户的习惯进行设定。字号不要出现奇数,否则在一些显示器上会有对不齐像素的状况发生。


4.2.2  行高

行高常规的有两种规范:

    ·  字号+8px;

    ·  1.5倍 / 2倍 * 字号。


我喜欢用第一种,就是字号大小 + 8px 作为行高的规范。行高是不可被忽略的重要细节之一,因为在算间距的时候,行高是要被算进去的。


4.2.3  字重

字重有很多,但是在真正的产品使用中,字重尽量不要太多种,2~3 种即可。


4.2.4  字体颜色

字体颜色数量建议在 3~4 个,不宜过多,但是每个层级之间区分要大一些。


文本应该保持至少 4.5:1 (基于亮度值计算)的对比度以保持文本清晰;最佳对比度为 7:1。测试对比度的网站:https://contrast-ratio.com


WCAG 2.0 中将颜色对比等级分为 3 种,A级,AA级,AAA级,等级越高意味着颜色的对比度越高,呈现出来的视觉压力越大。

    ·  A级:对比度 3:1,是普通观察者可接受的最低对比;

    ·  AA级:对比度 4.5:1,是普通视力损失的人可接受的最低对比度;

    ·  AAA级:对比度 7:1,是严重视力损失的人可接受的最低对比度。



4.3  icon(图标)

设定统一的图标使用规范,让视觉效果更和谐。


4.3.1  Icon 大小

icon 的常用尺寸有很多,需要注意的是 icon 的大小中,相邻的两个尺寸至少相差 4px,否则你会在后期用的时候会有选择困难症。同时功能 icon 尽量贴边或尽量贴边绘制,保证展现的视觉统一性(操作 icon 除外)。


单独 icon 使用的时候,尽量不要太小,最小值建议为 12px。


4.3.2  Icon 热区

icon 的热区经常被设计师和开发所忽略,本身 icon 的尺寸一般就很小,再加上如果没有设置热区的话,操作体验极差。所以一定一定要设置 icon 的热区,设置的值我建议为 icon 大小的 2倍。例:icon 大小为 14 * 14px,则热区大小为 28 * 28px。


4.4  size(尺寸)

页面内布局间、模块间、模块内的各部件距离。


尺寸大部分规范中都用的是 8 的倍数,不用纠结,直接用就行。我这里有个公式:Sn = 8px * n,n为正整数。特殊:最小支持4px。


五  交互


交互我分为两个方面:交互方式交互状态


5.1  交互方式

交互方式指的是对某一个操作所进行的具体行为,比如刷新方式有下拉上滑按压点击等方式,这就是所谓的交互方式。交互方式有很多种,没有最优,只有最适合。


交互方式要保持产品的统一性,同类别的交互不可有不同的操作感受。同时交互方式要符合大众的认知习惯,可创新但不可违背潜意识。


随着时代的发展,交互方式也在不断的更新。比如最开始的手机是按键式的,随着大众对屏幕大小的需求不断提升,到了现在的全面屏手机,如果这个时候你再去做当年火爆的按键手机,那你就只能跟市场说拜拜。


总结交互方式的几个关键点:创新统一紧跟趋势


5.2  交互状态

一个完整的产品生态是不会遗漏每一个交互状态的。


同样是做售票的软件,为什么高铁管家就比 12306 做的好呢?是因为高铁管家把很多交互状态友好的做了展现反馈,而不是冰冷的数据吞吐。


同类产品中,每个都有自己独特的交互状态,可能你一直用某个软件的原因只是有个功能的交互状态打动了你,从此你就深深爱上了它。


现在工作中,我们都在讲人效,拼命的去更新迭代,去研发新功能,开拓新产品,往往会忽略交互状态这个点,因为很多时候付出收获比是很低的,但是真正好的产品,这部分是不可或缺的。


交互真的太大了,单独写一篇文章都写不完,这篇我只能抛砖引玉,勾起你的思维,如果有任何要探讨的,欢迎来叨扰。


六  引导


引导分为 5 种:Newbie guide(新手引导)Steps guide(步骤引导)Help / Operation guide(帮助/操作引导)New function guide(新功能引导)Blank guide(空白页引导)


6.1  Newbie guide(新手引导)

新手引导是针对新用户的,首次进入产品的时候,我们要着重的把自己产品的亮点以及操作快速的介绍给新用户,让他用最短的时候上手我们的产品。


新手引导要言简意赅,并且如果非必要的话,尽量给用户一个可以直接关闭的按钮,让用户有选择权。我就非常讨厌有一些产品的新手引导,必须走完全部流程后才能关闭,恶心的不行。


6.2  Steps guide(步骤引导)

步骤引导一般用在有固定操作步骤的场景下,指引用户一步一步的完成想要的结果。常规的步骤引导建议在 3~5 步之间为合理。


6.3  Help/Operation guide(帮助/操作引导)

帮助/操作引导的展现方式是比较丰富多彩的,可以是提示语、辅助性文本、tooltips 等等,他的作用就是辅助用户去了解并且知道如何操作这个功能。


这个也是在产品中使用频率最高的,运用好他,可以让你的产品事半功倍。


6.4  New function guide(新功能引导)

他就是常用在新功能上线后,用户第一次登陆相关页面后做的一些引导,目的是为了告诉用户我们做了新东西,你快来试试吧。


6.5  Blank guide(空白页引导)

空白页引导一般用在在缺省页,对用户进行一些操作指引,让无信息的页面变得更有价值。比如百度在一些缺省页上就放了一些关于失踪儿童的信息,就因为做了这个引导,帮助了千万个家庭找到了失散的孩子。



七  组件


组件是设计系统里面最为庞大的东西。组件可以分为了 5 类:

    ·  Navigation(导航)

    ·  Data Entry(数据录入)

    ·  Data Display(数据显示)

    ·  Feedback(反馈)

    ·  Other(其它)


基本上这几类已经覆盖了多数的组件,下面我把我自己整理的这几类分别都包含哪些组件,以及组件的简单介绍给列出来,快来保存吧。


7.1  Navigation(导航)

    ·  Affix(固钉):将页面元素钉在可视范围。

    ·  Breadcrumb(面包屑):显示当前页面在系统层级结构中的位置,并能向上返回。

    ·  Menu(导航菜单):为页面和功能提供导航的菜单列表。

    ·  Pagination(分页):采用分页的形式分隔长列表,每次只加载一个页面。

    ·  Steps(步骤条):引导用户按照流程完成任务的导航条。


7.2  Data Entry(数据录入)

    ·  Checkbox(多选框):可选择多个。

    ·  Radio(单选框):只可选择一个。

    ·  Switch(开关):开关选择器。

    ·  Form(表单):具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。

    ·  Input(输入框):通过鼠标或键盘输入内容,是最基础的表单域的包装。

    ·  Select(选择器):下拉选择器。

    ·  Skeleton(加载占位图):在需要等待加载内容的位置提供一个占位图。

    ·  Time selectors and sliders(日期时间选择过滤器):当用户需要输入一个时间或日期,可以点击标准输入框,弹出时间面板进行选择。

    ·  Transfer(穿梭框):双栏穿梭选择框。

    ·  Upload(上传):文件选择上传和拖拽上传控件。


7.3  Data Display(数据显示)

    ·  Badge(微标):图标右上角的圆形徽标数字。

    ·  Card(卡片):通用卡片容器。

    ·  Collapse(折叠面板):可以折叠/展开的内容区域。

    ·  Popover(气泡卡片):点击/鼠标移入元素,弹出气泡式的卡片浮层(可操作)。

    ·  Tabs(标签页):选项卡切换组件。

    ·  Table(表格):展示行列数据。

    ·  Tag(标签):进行标记和分类的小标签。

    ·  Timeline(时间轴):垂直展示的时间流信息。

    ·  Tooltip(文字提示):简单的文字提示气泡框。

    ·  Tree(树形控件):文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能。


7.4  Feedback(反馈)

    ·  Alert(警告提示):警告提示,展现需要关注的信息。

    ·  Notification(通知提示框):全局展示通知提醒信息。

    ·  Drawer(抽屉):抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到到原任务。

    ·  Modal(对话框):模态对话框和非模态对话框。

    ·  Progress(进度):展示操作的当前进度。

    ·  Spin(加载):用于页面和区块的加载中状态。


7.5  Other(其它)

    ·  Button(按钮):按钮用于开始一个即时操作。

    ·  chart(图表):图标数据显示。

    ·  Copyright(版权):版权信息。

    ·  Divider(分割线):区隔内容的分割线。

    ·  logo(标志):logo 的使用。

    ·  LocaleProvider(国际化):为组件内建文案提供统一的国际化支持。

    ·  Text link(文字链):点击有链接跳转的文字。

    ·  Scrollbar(滚动条):在特定界面区域内进行内容的更多展示。


以上组件可根据自己的产品进行增删,把组件规范设计完成后,整个设计规范就完成了 90% 以上,可以算一个比较完整的设计规范了。



总结


每一个设计规范都是有灵魂的,规范是为了更好的做设计,而不是限制设计师双手的枷锁。


设计规范也不是一成不变的,他在落地使用的时候多少都会有问题,需要慢慢的去反复检验规范的合理性,发现不合理的及时更正。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:友设青年
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务





撕开B端封印,数字时代下的可视化构建

ui设计分享达人

为什么说是撕开 B 端封印呢?没接触过 B 端的同学,很大一部分都认为 B 端不就是简单的列表和图形吗?拿开源组件拼拼凑凑就可以了,有什么可设计的?


其实这个想法完全错了,你如果接触后就会发现,B 端所需要的掌握的产品知识、思维逻辑、规范意识等等太多了。


而且近几年 B 端这个词出现的频率越来越高了,因为前几年大家都在争 C 端市场,纯 C 端的流量争夺已经进入了尾声,B 端产品反而带来了新的机会点,同时也被慢慢的重视起来,比起以往 B 端设计师,现在需要掌握的技能也越来越多。你可以查阅一下一些招聘网站,现在 B 端可视化方面的岗位是非常火爆,与 C 端相比,人才缺口更大,未来几年 B 端也会更加火爆,有机会接触 B 端的话就不要错过机会。我们团队平均招聘一个合适的设计师基本要两个月的时间。


说了这么多,我们开始今天的主题吧!


首先在座的可能有部分设计师没有接触过数据可视化的设计,那么第一个问题来了,什么是可视化?大家想一想。给大家三秒钟~


通过可视的表达来增强用户处理数据的效率。


接下来我会从三个方面来讲解如何构建可视化:

    · 灵感需要迸发,更需要积累

    · 从零到一设计驱动

    · 设计度量



一、灵感需要迸发,更需要积累


1.1  数字时代下,99%的问题都是旧问题

数字时代下仍有信息不对称的情况,尤其是关键技术和设计上的问题,但是如果你用心寻找,就会发现你的新问题则是别人很久之前的旧问题了。所以要做个有心人。


但是问题又来了,有时候真的不知道该怎么找、去哪找?这是个很常见的问题。因为可视化不比插画、平面等这些成熟的领域,他是比较小众的,所以灵感以及素材的搜寻是一个令新手设计师头疼的事情,再加上对关键词的熟悉程度不够,导致很多设计师只停留在【可视化】这个关键词里,最后感觉搜来搜去都是见过的图,没有新意。


1.2  明确目标,知道自己想要找什么

互联网信息太多了,漫无目的的找灵感,只会浪费时间,一会看到这张图好看,一会看到那张图好看。不知不觉几个小时就过去了。


1.3  建立关键词词库

确定目标后,就要细化关键词了。怎么建立关键词词库呢?


关键词词库由3部分组成:终端、设计类型、业务类型。


    · 终端:大屏、移动端、web 等等。

    · 设计类型:每个细分的数据可视化类别都是有一些专有名词的,比如最近比较热门的车载HMI系统,那他的类型关键词就是 HMI。通过这些关键词,你会搜到更精准的结果。设计类型关键词比如:AR/VR、HUD、HMI、FUI等等,你要了解你们公司相关类型的关键词,记录下来。以及跟你们有关联的,都记下来,补充自己的词库。

    · 业务类型:智慧城市、生物医疗、监控部署等等。


这三类单独或组合进行搜索,就会看到更多可视化产品了。把关键词词库建立起来后,就可以去常用的网站上搜索了,最好用的还是 behance 和 Pinterest。


1.4  除了常用的设计网站,还有哪里可以看?

企业官网:很多做数据可视化的公司,会在官网展示一些能体现自己业务特点、业务实力的案例,而这些案例就是这些企业最好的数据可视化设计作品了, 所以但凡有案例展示的官网,案列基本都是最典型最好的设计,所以从这些案例中找灵感,也是一个有意思且有效的方法和途径。


1.5  你看到了别人看不到的,设计才能有所不同

总结一句话:你看到了别人看不到的,设计才能有所不同。如果你和别人看到的是一样的,你怎么比别人做的更优秀?


1.6  兴趣推送

经常刷短视频/新闻网站的应该知道,系统会根据你的点赞、收藏、浏览等数据来给你安排后面的内容推送,以保证给你推送更精准的内容。设计网站亦是如此,behance 等网站上也都是千人千面,它会根据你的点赞收藏等来读取你的喜好,进而推送更精准的作品。所以假设你是一个B端数据可视化方向的,你就经常搜、点赞收藏相关作品,之后你的首页出现相关内容的几率也会变大。


1.7  定期清理,更新迭代

最后一点,这个也是好多设计师的通病,收藏即学到。


灵感库要求精而不是多,每隔一段时间,回来翻一翻自己之前收藏的作品,会发现有些作品自己已经看不上了,因为在做灵感收集的过程中,我们的审美会自然有所提高,当输入的作品样本越来越多,我们对作品评价的维度也会更多,之前那些觉得好的作品,现在看来也就会有缺陷和不满,这是一个很正向的结果,成长就是一个不断剔除的过程。删掉那些自己觉得不满意的作品,添加更符合自己当前审美的作品到灵感库里。


这样慢慢完善你的地基,才能更高的向上走。



二、从零到一  设计驱动


讲完第一部分,我们开始搭建产品。

我负责从零到一的项目大大小小的得有10来个了,我认为在产品整个产品周期中设计师的话语权最高的时候就是项目初期,是可以做到设计驱动的。既然设计可以有足够的的话语权,你就得规划好未来的设计走向。


产品初期,经常会有几个争议比较大的问题,我们来聊一下。


2.1  设计先行还是调研先行?

这是新项目必须要做的选择题,再讲之前你先想一下,如果是你,你会如何选择?


我的观点是设计先行。(当然设计先行是建立在你至少对这个项目的行业有个简单的了解之后,先设计再用户调研),为什么呢?因为如果用户调研先行的话,用户只会反馈当下最想要的东西,从而有可能给你带来误导。就比如我们经常举的一个例子:汽车出来之前,人们只想要一匹更快的马。


我们要解决的不是用户当下想要的东西,而是痛点背后用户真正需要的东西是什么。在 0-1 的这种创造性的项目,往往设计者才是当下最懂产品的人,你把决策权交给一些不懂产品的人,做到最后只能是迷失了方向,锅还是设计来背。所以一开始设计师要把决策权拿在手中,掌握航向。


2.2  设计先行还是规范先行?

这个问题在现在看来相对比较统一,但有的同学还是有疑惑,所以我拿出来再跟大家聊一下。


首先我的观点是设计先行,在设计之前就定好规范的基本都是自己YY的,返工率极高。等你在做具体设计的时候就知道之前做的规范都是白费力气了。一般都会选用在项目完成之后或者主风格及主要页面完成后再输出规范,这样既可以减少规范的改动,也可以保证后面功能延用规范,一举两得。


当然了,设计规范不是所有项目都要有的,它是为了减少工作而不是增加工作,如果是一次性项目,就不需要再额外花费精力去输出规范了,浪费资源~


2.3  完成和完美那个更重要?

现在都是争分夺秒的时代,任务是无止境的,没有做完的时候。造成这个局面的无非就是一个问题:时间不够用。通常的做法就是先完成再迭代,做产品久了你就会发现,完成比完美更重要,不完美你还可以再迭代,完不成就有可能错过一个风口,从而失去了变完美的可能~


聊完这三个问题,我们在设计的时候也要有一些注意项,真正的做到设计驱动。


2.4  把复杂变得清晰简单而且美

对于设计师来说,我们的任务就是把复杂问题变得清晰简单而且美,所以我们应该成为企业和客户之间沟通的“架桥人”。通过设计的方法,把无形的、复杂的技术,通过有形的、可视化的方式展示出来,让客户更直观、清晰的感受到产品的功能,看得懂其在业务场景中产生的价值。


2.5  转换视角,建立共鸣

站在客户视角,聚焦客户关注的核心问题,通过情景把内容有序组织起来,快速与客户建立共鸣,有效降低内容理解难度。


2.6  产品架构可以不那么复杂

把复杂的业务/功能简单化、傻瓜化,最大的降低学习成本,能帮用户操作的绝不让用户亲自去操作。你要让用户在1分钟之内了解你的产品是做什么的、有什么功能,你就成功了。


2.7  大胆隐藏冗余内容

B 端项目中内容量是巨大的,面对庞杂的信息,去粗取精,提炼各场景的核心内容,避免冗余信息阻碍内容有效传达。话术语言不单要简单易懂,还要严格控制文字长度,保证内容可以被快速扫描和理解。


2.8  尊重用户习惯

不要妄想改变用户养成的惯性思维,你要记住惯性思维大于设计思维,他的阅读习惯、操作习惯都是不易改变的,不要为了个性化而尝试去改变,大部分情况下结果不会是那么的理想,除非你有极大的把握。


2.9  选用合适的图表

这个是常提到的,我就在这里简单给大家提个醒。比如做数据对比,柱状图更能清晰表达出用户想要的结果,你却非要放个酷炫的雷达图,他的本质目的都没达到,要美观有何用?


每个图表都适合哪些场景使用,像 antv、hicharts 等都有介绍,我就不一一赘述了,我之前也写过一篇关于如何合理利用图表的文章,大家有兴趣的可以去看一下。



三、设计度量


产品设计的好与坏我们需要去验证、去度量。我们怎么去验证可视化的好与坏呢?


美与丑也是主观的,没有绝对的美,也没有绝对的丑。一个产品,总会有人喜欢有人不喜欢,但是我们要迎合大多数人的审美。


所以就需要一个方法论来验证产品的好与坏,现在各大厂都在做自己的一套产品验证的方法论,阿里在这方便算是国内做的不错的,我举几个常用的度量模型。

    · 阿里云:UES

    · 蚂蚁金服:PTECH与易用度

    · 1688:五度模型

    · 优酷:DES


UES 目前是国内最好的,在 5 月份的阿里设计周上也正式对外讲解了 UES 模型。我拿阿里云的 UES 简单讲一下吧,这么多度量模型,无论他的方法、维度有所不同,但他们的目的是相同的:通过模型来度量设计成果。


    · 易用性:易操作性、易学性、易见性 ...

    · 一致性:整体样式、通用框架、常用场景及组件 ...

    · 任务效率:任务完成率、任务完成时间、功能使用率 ...

    · 性能:首屏渲染时间、API 请求响应时间、页面请求响应时间 ...

    · 满意度:产品满意度 ...


UES 分为 5 个模块,这 5 项是整个产品生命周期需要验证的。


关于 UES 我就介绍到这里吧,UES 模型要是展开讲的话,半天都讲不完,感兴趣的话可以去阿里云官方发布的 UES 模型的相关资料中深度研究一下,看看适不适合自己的产品。


上面是度量产品的模型,接下来针对我们 B 端设计师,我们也要有一些指标来度量自己是否合格。


3.1  设计效率

现在内卷盛行的时代,各大厂都在讲人效,毕竟时间才是最珍贵的,所以现在都在想方设法的提高人效。而且 B 端相对 C 端来说,可以有更多自动化的工具。


举个我公司的例子,我刚去的时候基本没有自动化工具,每个设计师每天也都在忙碌,谁也没偷懒闲着。但是我发现有很多重复性的体力劳动是不需要多少思考就能完成的,但是却耗费了将近 1/3 的时间。所以我就在想如何提高人效,把一些体力劳动用一些工具来代替,这样就能释放设计资产,去做更重要的事情。


当时就做了第一个自动化的工具:设计系统,现在大家对这个词应该不陌生,但是我们刚开始做的时候比较早,还没有一些比较完善的设计系统供我们参考,所以我们也算是前几批摸索设计系统的团队。设计系统做好后是可以把这1/3 的设计时间节省了下来,而且团队的规范性更加统一。


后面的话我们也是做了一些其他的自动化工具,比如结合一些插件做到 icon、组件等发布的自动化,并且与研发同学打通,有相应的自动化提醒工具,这样也节省了与研发的沟通成本。


在工作中,流程上能减少一步就是成功,慢慢来,万里长征就是一步一步走出来的。


3.2  增长设计

增长这个词来源于【增长黑客】这本书,顾名思义这个词的就是通过设计来促进产品增长。


这个词用在 C 端上比较多,因为 C 端可验证的方法比较多,见效快,所以我们常见的一些增长设计的案例都是关于 C 端的,而 B 端的话,受限制的因素较多,设计只是影响增长的一部分,而且见效慢。


但是虽说影响因素多、见效慢,我们还是可以抓住机会、多去尝试一些方法来做到设计增长。我这个方法不行,我就换一种尝试。大家都是在摸索中过河~


3.3  为业务赋能

所有的设计都是要为业务赋能、为商业买单。我们设计的本质就是为用户解决问题,让用户以最直观的方式理解产品。不要为了所谓“我认为很美”而与业务背道而驰。


3.4  体验创新

用户体验设计师会越来越重要,近两年逐步被重视,而且未来几年会越来越重视。行业内需要更多动脑的人而不是仅仅会动手的人。


现在到了互联网下半场,拼的不仅是功能,用户体验的重视程度已经被提升了上来,在工作中的占比也越来越重。


再加上现在这个超级内卷的时代,你不提升,你的竞争对手就把你干掉了。而且你如果只是一成不变的维护老版本,你去下家面试的时候都没有拿得出手的产品。


3.5  善用工具

现在各种办公类工具、软件层出不穷,而且很多工具是比较类似的,有的设计师再选工具的时候就很纠结,我认为完全没必要纠结,首先你要明确我想要达到什么目的,只要某个软件满足着你的需求就可以用。


工具是为人服务的,我们的设计软件从 PS – Sketch – Figma,无论怎么变化总要围绕一个目的:更高效的完成工作。


尤其是一些自动化工具,现在人工智能升级很快,要多关注设计自动化方面的工具,让他来解放我们的双手。



总结

最后送给大家一句话:

这时代唯一不变的,就是变化。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:友设青年
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


常见科技风格分类

ui设计分享达人

老板:给我来一套科技风,要炫酷,要眼前一亮的感觉

    你:好嘞~(叮叮当当咚咚当当)

    老板:哎呀,我要的不是这种太花了,不够高端

    你:给您改(叮叮当当咚咚当当)

    老板:哎呀,也不是这种太素了

    你:行,改....(我刀呢)


    没做过科技风格的新人缺乏对常见科技风格的了解,很容易根据甲方模糊的描述及要求,主观性的设计,还会在甲方要改的情况下十分委屈,我做的就是你描述的炫酷科技风啊。科技风格大类本身特征就是炫酷,眼前一亮的感觉,甲方没有了解只能粗略的表述。设计师主动了解市面常见的科技风格细分及其使用场景。就能够问出甲方爸爸更细化的需求,更客观的根据使用场景选择恰当的细分科技风,减少不断重改的成本。


FUI:

    FUI 就是 Fictional User Interfaces (Fictional GUI),就是 Fantasy User Interfaces,就是 Fake User Interfaces,就是 Futuristic User Interfaces,这些用户界面它们是科幻的,是未来派的,是奇幻的,是虚假的.观赏性大于实用性。

    并不是所有风格的FUI都适合应用于现实中,比如——半透明介质且信息复杂的的UI,只适合出现在影视作品里面(和一些视频游戏当中)。它们的表现性强,看起来复杂精密,但对于信息展示功能很弱。其存在的目的是更好的配合场景,不会遮挡演员的脸部。想想看主角对复杂的数据一顿操作猛如虎,让观众眼花缭乱,对主角更加崇拜。


1.商务科技风:

     精致、高端、轻质感;简约干净、形体线条精细;功能感强

     应用:

    车载UI;金融UI;各种科技工具类产品的登录注册或官网Banner;商务海报等

    特征:

    1.商务科技配色较为严肃,低调。背景以深蓝色,深灰色背景居多。

    2.元素的形状并不复杂、外轮廓整体规则,周围的细碎装饰较少。

    3.强调品质感,会模拟一些较为细腻玻璃、金属或哑光的微质感。对于光的使用较为克制,较少大范围的使用辉光,多在边缘使用较细的流光,看起来更加的犀利精致。

(偏商务科技风格例子-图片来源于网络)

2.扁平科技风:

    整体风格偏向机械、直观,其扁平特征是元素扁平纯色块或渐变,弱化图表空间感及体积感。多组扁平的数据可    视化图表,在空间层次的表现上更多是在同一平面上。

    非常适合多数据后台数据展示,强调信息数据的清晰展示,较多使用纯色面元素作为底板,减少了环境的背景外扰因素。且数据分组展示,功能分区明显。

    设计成本及实现成本较低,为目前大多数数据可视化大屏展示所选择。


(偏扁平科技风格例-图片来源于网络)

3.HUD(仪表盘)科技风:

    视觉多使用单色,点线元素。可以与现实背景结合度高。

    应用:

    电影(漫威系列FUI)、游戏、企业产品宣传视频、AR等展示型为主

    特征:

    1.颜色使用上单色居多,尤其多亮色白,亮色蓝,同色相多透明梯度变化。无质感或毛玻璃质感。

    2.简洁而不简单,层次丰富,典型风格HUD。空间层次感丰富,使用半透的结构线3D模型或晶格模型,显得轻        巧而精致,用户能够透过信息层看到场景层,

    3.极简科技风需要设计师把控好细碎元素的体量和数量,对信息不会进行过多的视觉干扰。

    ps:

   极简科技风数据的展示容量大于扁平科技风,看起来很复杂高端但通常实用性差。如果使用过多的数据,则显示    相似类型的图表展示相似的数据集在视觉上可能会缺乏新鲜感,但更易于理解和理解。具有不同的图表在视觉上是令人兴奋的,但用户需要花费更多时间阅读。


(偏极简科技风格例-图片来源于网络)

4.赛博炫酷科技风:

    赛博朋克又称数字朋克、网络朋克。

    应用:游戏、H5、运营banner配图等需要强视觉氛围的运营。代表电影如:攻壳机动队、头号玩家、银翼杀手等

    特征:

    1.张扬奇幻的娱乐感,技能风、故障风、视觉冲击强烈。常见元素:全息投影、义体、立体城市、高达机械元素  等。

    2.人造光是赛博朋克在视觉上最大的特征,背景暗色,常用荧光黄、紫、蓝、粉 、绿灯内外发光,模拟霓虹灯管自发光效果,重点元素高亮辉光。

    3.色彩冷暖撞色对比强烈,如:红蓝对比青紫对比黄橙对比等。

    4.数码屏幕与全息投影是霓虹灯的一种延伸,既能体现未来世界的高科技的感,也能体现出人造和虚拟的概念。部分元素前后叠影色彩错位,有频次的闪动,模拟电子科技的偶发故障。机械化IP形象和字体设计常见金属感和拼接感。

(偏赛博科技风格例-图片来源于网络)

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:唐小葱

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



情感化设计心理学:用户心理定律及优秀案例分析

ui设计分享达人

将普遍存在的人性用户心理规律运用于设计,增加设计的温度。

近来对用户心理比较感兴趣,去看相关设计资料的时候发现相关内容重复性较高,多方搜集资料结合自己的一些分析总结出一篇补充。

定律是钥匙,在遇到让我们上瘾,持续付出或获得情感的APP,多去想一想它背后洞察了哪些人性及心理,能不能为我们的后续的设计吸收。










undefined

undefined

undefined

undefined

undefined

最后想说,设计师的价值不仅仅在视觉,好的设计必是好用好看好懂用户的。跨领域学习补充自己的视野,多思多想,掌握钥匙,开启用户不同的心门。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:唐小葱

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


交互设计中排行榜设计详解

ui设计分享达人

“今天吃什么啊?”

“不知道啊,看看大众点评,哪家店比较靠前”

“一会去看什么电影?”

“我看豆瓣上,这部片子评分特别高,我们去看这个吧”

当我们每天面对类似“吃什么”“买哪个品牌”“周末去哪玩”等等需要抉择的问题时,会发现当你面对的选择越多时却越不知道该如何做决定,或者当下做了决定后会一直思考做的这个决定是不是最好的,这恰恰是当代绝大部分用户在实际生活中面临的问题-选择困难。面对用户的选择需求各大平台都有自己的方式,帮助用户做决定的同时,引导用户购买目标产品,极大的降低了用户的选择成本,其中排行榜就是平台的常用套路。用户的选择成本是什么?排行榜为什么能够帮助用户降低选择成本?如果排行榜仅仅是用来降低用户的选择成本,为什么所有商家都对排行榜趋之若鹜?下面带你了解为什么人人都爱排行榜,及我们生活无处不在的“显性”“非显性”排行榜。你可能不知道是我们的生活正在被各种排行榜所支配


排行榜的本质是一个没有感情的信息筛选机制,将所有相关的同类事物之间通过比较,从而反映出同类事物的客观实力。排行榜建立的基础在于用户对信息筛选平台权威性的认可,比如我们买衣服会首选淘宝,电子类产品会首选京东,看电影会看豆瓣评分,这些都是对平台某一领域权威性的认可。用户信任平台权威性对信息的筛选,由于锚定效应使得用户降低自己的选择成本,可以准确快速的做出选择。同时由于用户的从众心理或者羊群效应,也会对上榜主体产生强烈的品牌认可,为上榜主体带来更多的利益、强烈的荣誉感、甚至流量以及平台背书标签,比如:B站的百大up主,各个平台排行榜的销量冠军、朝阳地区必吃榜第一名,那么这一切背后的原理是什么?


一个完整的排行榜是由平台、上榜主体、用户三大组成部分,俗话说屁股决定脑袋,不同的定位决定了排行对三大组成部分不同的作用,当然背后的原理也不尽相同。


1.选择类排行榜-降低用户选择成本

在没有各种应用前,当我们决定购买什么东西或去哪家消费时,前期需要花费大量的人力、物力去搜集相关的信息进行整理集合对比集合信息后才能做出决定,也就是说用户需要经过信息的搜集-备选集的建立-择优决策3个过程才能等到最终的结果。在建立备选集后,做出择优决策阶段发生的成本或费用都是用户付出的选择成本(前两个阶段发生的成本是交易费用,而不是选择成本)。在备选集的建立过程中,包含的选择越多,用户选择的难度就越大选择成本就会越高

选择性排行榜在备选集建立完成后,利用沉锚效应在用户心理建立潜意识的目标参照,帮助用户完成择优决策,降低用户的选择成本。(另一方面平台在帮助用户降低选择成本的同时,也影响着用户的最终选择,在接下来的平台侧方面会有详细的分析)。

比如说:当我需要买个耳机时,如果在没有各大应用的前提下,我需要通过找到我身边的耳机发烧友或数码电子方面方面的内行人对耳机进行了解,收集信息建立备选集,但由于京东在电子设备购物方面的权威性,我会优先查看京东的耳机类排行榜,也就是说京东帮助我完成了前期对于信息的搜集及备选集的建立,而用户出于对平台权威性的信任,根据平台给出的维度参照、品牌参照、价格、标签参照等信息,最终快速的完成自己的选择。整个过程就是用户在对锚的寻找,以及用户对信息确定性的寻找过程。

2.信息类排行榜-满足社交需求

在马斯洛需求中,当个人的生理需求和安全需求被满足时,与他人建立情感联系或关系成为人们最强烈的需求,即社交需求。社交又分为:为达到某种目的产生的功利社交或为获得情感连接及体验的共情社交需求。例如:QQ音乐新增的扑通社区、微博的明星超话打榜等功能模块的火热正是满足了拥有共同兴趣爱好的用户对于共情社交的需求。

无论是“功利社交”还是“共情社交”首先需要的是沟通沟通的本质则是信息的流通,但当双方都没有可以沟通的信息时则社交不成立,而类似:微博热搜、今日头条、澎湃新闻等信息类排行榜,则给有社交需求的用户提供了可以展开话题相通的谈资

选择类排行榜中,提到的从众心理(又称羊群效应),是指人类由于对信息压力规范压力,会希望融入到群体中寻求安全感的特性,即便此类信息与自己无关。大部分人由于对未获得及时信息的焦虑感,会热衷于浏览此类排行榜来获取实时信息,融入群体生活。每天早上,在通勤的路上用户利用碎片时间刷微博、浏览知乎或今日头条等应用了解最近发生了什么社会事件,在上班电梯或工作间隙讨论各自掌握的信息,及对事件的见解,甚至在与他人有相同的见解或之后,会对对方产生莫名的亲近感等等,这些都是在满足大众自己的社交需求。

3.分享类排行榜-自我确认需求

过年期间各家app纷纷都推出了自己的用户年度报告总结榜,不知道你有没有参与到其中,并把这些报告的截图分享到自己的朋友圈!在我们的日常生活中也会在朋友圈、B站等看到各种测试自己隐藏能力或性格的小程序,人们对于这类活动的空前热情其实是因为人类除了需要信息的确认外,还需要清楚自身在大数据下的自我确认,通过各种各样自我测试类榜单,判断自身的能力、情绪、价值等等,来达到自我认同,否则就会感到焦虑不安。

加拿大社会学家欧文·戈夫曼在《日常生活中的自我呈现》中提出他对社会生活的理解是“社会是舞台,人人皆演员”。 在社会这个舞台我们需要对外有印象管理的过程,我们想要呈现给观众怎样的形象,需要我们对自身及身边人有所思考和了解。所以在社会生活中我们呈现的是自己思考管理下被他人和社会接受的自己,为了维持自身的平衡防止崩溃,人类会自发“忠诚、纪律、谨慎”的维护自己的外在形象。而互联网平台大数据则折射出“隐形”的自己,让用户更加清楚的认知自己,同时通过分享,满足自我确认以及他人确认的需求。

我目前只总结出这三种类型的排行榜,如果有小伙伴想到其他类型欢迎在评论区提出,大家一起参与讨论。

无论哪种排行榜,用户信任的基础都来自对平台的信任,那么用户为什么信任平台?排行榜对平台意味着什么?背后原理是什么?下面我们来讨论排行中平台的影响及背后的原因。


对于用户来说排行榜是为了满足用户对于数据参数、社交信息、自我个人的确定性,选择成本是品牌经济学的核心,而用户对于排行的信任首先要建立在平台品牌的权威性下的结果。

1.平台权威性—用户侧

从我们记事起,我们对世界的认识来自我们的父母或老师,而这些教导我们什么是对、什么是错的长辈或老师,对当时刚来到这个世界的我们来说就是权威的化身。长大后我们对于权威的认可则更倾向于某一领域的专家,比如:医生、律师、教授等,认为处于权威地位的人在某一领域相对普通用户的判断更可靠,可以帮助普通用户节省研究这一领域问题的工作,做出更轻松的决定虽然不一定是正确的

搜索我们会第一时间想到百度,需要观看影视、书籍会想到豆瓣,想听音乐会打开网易云音乐、QQ音乐等等。各大应用经过长时间的厮杀各自在用户心中建立了某一领域的权威性,形成品牌号召力,推动着用户做出需求决策。另一方面排行榜中也会说明数据来源,比如京东会在排行榜页面有明确的榜单说明,豆瓣根据平台数据更新,汽车之家依靠外部的权威数据等等方式力证自己榜单的公正、透明,减少用户做出决定中的思考、猜测,获得用户的信任,增强平台的权威性。那对于平台来说权威性的建立意味着什么?

2.平台权威性—平台侧

  • 影响用户的决策方向

平台权威性对用户来说意味着说服力和影响力,在减轻用户的决策压力的同时,也影响着用户做出平台所需的决策方向

  • 平台自带话题性

平台本身的权威性也会为平台承载的内容带来讨论的话题度,加大平台承载内容的传播范围。比如,每年苹果发布会都会带来范围极大的热度讨论,而app store内的热门推荐自带话题度和讨论热度

  • 输出口优化

排行榜作为内容输出口,在平台权威性的背书下,产品优化自身的价值,而平台也可以通过排行榜优化自身平台价值。

  • 平台盈利

平台权威性下,可以通过多种方式达到盈利,比如苹果app store应用商店内的付费应用,百度的凤巢系统、微博热搜的第3、4位排名等。

3.平台权威性—广告告知

在平台完成建立权威性后,部分平台开始利用排行榜进行商业变现,比如百度、58的竞价排名等,现在大部分应用会使用明显的方式告知用户,防止平台建立品牌权威性。比如微博热搜第3、4位广告位的“荐”,淘宝、小红书推荐猜你喜欢的“广告”。


上榜主体作为整个排行榜的内容中心,由于排行榜自带的竞争机制、筛选机制,使得上榜用户会很乐于分享出去,比如游戏类应用王者荣耀的胜利者排位、微信运动排行榜。

由于马太效应上榜主体中的头部用户会获得平台更多的曝光量、绝大部分用户的关注度,以及各种潜在资源,比如:流量、资源、人脉、某一领域影响力、平台背书等等,这些都是潜在的社交货币。这种激励机制极大的满足了上榜主体的荣誉感、及平台归宿感,比如bilibili不同粉丝量级会送出相对应的粉丝牌。

而平台方也利用上榜主体挖掘潜在的用户,为平台带来更多的新用户,加强平台权威性,形成平台和上榜主体的良性循环。甚至与出现上榜主体自己的流量超过平台自身流量,带走平台用户的情况。比如去年和热闹的“巫师财经推出b站,签约西瓜视频”,各大平台也时不时会出现抢占流量up主的情况。

排行榜资源的建立

排行榜设计要达到用户攀比的效果,很重要的充分条件就是相同需求好友基数足够大,这样才能构成排行榜设计成功的必要条件。

  • 同系同门资源导流

对于已有成功产品的公司,可以借助平台相互间的导流完成初试资源的搭建,比如:微信初期借助QQ好友流量,带来好友初期的爆发;抖音最初的活跃借助今日头条的流量输入。

  • 自建用户体系

不断推送已关注好友的信息流,当通讯录好友开始使用头条都要发送系统推送。比如全年年低火爆全网的cloubhouse就是利用的熟人社交,你要先有这个人联系方式才能要求好友,关注的人越多才能解锁更多的聊天室。通讯录、地理位置、兴趣偏好等等,不断社区建设推送动态信息流和好友卡片推荐。

  • 伪造

当应用建立初期,没有很多的资源和内容时,需要平台自行填充内容,使得排行榜信息量大,增加用户活跃,才能挖掘用户的需求和个性化。不如一些小编推荐、猜你喜欢等等,或是平台pgc发布推送的内容。


面对不同的用户人群及使用场景排行榜的入口表现形式也会千变万化,根据表现形式大体可分为“显性排行榜”和“隐形排行榜”。

在界面有明显的榜单名称、排序、评判规则、上榜主体、卖点信息等。排序和内容主体是这个排行榜的基本构成,其他则根据不同产品类型及产品需求决定是否展示。

1.页面tab

在首页底部或顶部tab形式出现,多出现在以UGC或文字信息为核心的产品,以内容信息为主,常见以信息热度为主要功能的资讯、新闻类应用。比如:知乎、今日头条、36氪。

知乎热榜内容完全展开;36氪分为话题榜、人气榜,话题榜仅展示前5条,人气榜展示10条,仅在前5条有名次图标,在36氪热榜的中部还会出现收藏榜,综合榜。

而今日头条仅在整个页面的1/3处展示部分“头条热榜”,点击“查看更多”后,展开“头条热榜”及“今日关注”“北京热榜”,整个交互形式类似微博热搜。

2.图标入口

首页功能入口处明显排行榜图标,优先级较高,常见自带推荐属性,能够帮助用户快速选择,减少选择成本,比较依赖榜单的应用。比如:豆瓣、音乐类、腾讯动漫等应用。

其中豆瓣、网易云音乐由于各种类型的排行榜很多,在图标点击开后,在当前页面平铺不同维度榜单类型,用户进行点击跳转;腾讯动漫相对榜单类型较少,在左边侧边栏切换不同的榜单。

3.商品详情页榜单入口

用户查看商品详情时,可能会希望能够横向对比同类商品,才能最终决定购买那件商品。常见于电商类应用,比如:京东、拼多多、得物等。点击后进入不同的榜单页面,获取更多产品信息进行筛选。(淘宝的商品详情页没有排行榜,但在首页却存在隐形排行榜,在隐形排行榜模块会有详细说明)。

4.搜索-筛选(无明确搜索目的)

当用户没有明确搜索目的时,搜索框的下方,平台会推荐没有明确指向性但有热度的产品信息。衡量的标准一般为搜索热度或信息本身的热度。利用榜单效应留住用户,比如:微博热搜、淘宝热卖、抖音热榜等。


没有明显排名及规则,但经过大数据、平台或榜单制作者筛选后呈现在平台用户的面前,位置越靠前,在用户心目中的默认位置越靠前,比如淘宝的“有好货”、编辑精选等。

1.编辑推荐/小编推荐

在平台建立初期没有特别的内容供平台呈现,这时候就需要平台人工有目的的推荐一些内容,不同于“猜你喜欢”建立在用户的行为数据下,编辑推荐更多的平台希望用户看到的内容,一方面作为平台内容的输出口引导用户,另一方面内容是平台自己发布内容,也可以保证内容的高质量。

2.猜你喜欢/相关推荐

平台根据用户之前的浏览量、收藏量、转发、搜索等用户行为数据推荐给用户相关内容。这个时候的应用基本已度过最初的获客期,并且存在大量的平台用户使用数据,“猜你喜欢或相关推荐”模块用来增加用户的浏览时长及购买的可能性,各大应用平台适用性强,一般出现在首页部分。

3.年度总结排行榜

朋友圈每年年底都会晒出的各种各样的生活、音乐、消费的排行榜,这些其实是用户自己确定了解自己,且喜欢他人了解自己的一种方式。用户通过网络数据折射出自我的轮廓,清楚的认识自己。

4.TOP排行榜

不知道大家小时候看没看过《第10放映室》,那是我最早关于排行榜的印象,里面会有各种最佳动作片总结、最佳男配角总结等等,以香港电影偏多,是我早年的电影信息资料库。现在我们也会在小红书、抖音、公众号平台刷到各种各样的top推荐,这其实也是排行榜的一种。TOP类是已经经过人为筛选的排行榜,从众多选择中选择出部分答案,给出理由,而用户只需在已被筛选过的内容中进行决定,节省选择成本,比如豆瓣每年都会举行的豆瓣电影。另外一种TOP榜并不能帮助用户做决定,但可以迎合用户对确定性需求的各种盘点性质的排行榜,比如抖音的TOP榜哥就是盘点各种内容,人物。

5.搜索-筛选(有明确搜索目的)

相比其他排行榜,筛选后的内容已经体现了用户的具体需求,高效明确的给用户提供选项,引导用户快速选择。


排行榜一般由必需的榜单头部、上榜主体,及非必需的榜单规则、更新信息构成;而上榜主体由必需的主体信息排序,以及非必需的推荐理由、排名变化、热度信息构成。

好的榜单能够快速吸引用户快速找到自己的需求点,引导用户点击排行榜进行查看。而榜单头部也由于功能需求的不同分为唯一性榜单头部、可复用性榜单头部

1.唯一性榜单头部

当排行榜在整个应用中有且只有一个时,通常会对榜单头部的背景及榜单名称进行个性化、品牌化设计。比如微博的微博热搜、知乎的盐选榜单、今日头条的头条热榜、大众点评的大众点评榜单等。其中微博、头条、大众点评都在名称上有做品牌漏出,增加平台的品牌权威性。

2.可复用性榜单头部

有些应用平台会存在内容需要多种不同纬度的排行榜展示的情况,为了平台的统一性、降低后期的维护成本,一般会使用可复用的榜单头部,如豆瓣、京东、QQ音乐等。

得物通过替换左右切换商品进行宣传。豆瓣、微博、马蜂窝虽然都是通过替换图片及文案的形式达到适配,但根据场景又有不同。豆瓣、微博因榜单效应根据榜单第一位的变化更换底图及文案;马蜂窝沿用自己品牌的蜂窝形状及“马蜂窝榜单”的标签设计形式,通过更换文案底图达到适用不同主题;京东就相对比较简单,只是更换标题的文案达到多主题适配。


排行榜上榜主体由于不同的场景业务需求,一般有纯文字形式、图文结合形式、横排+列表结构3种表现形式,其中主体信息及排序为排行榜必须信息,而推荐理由、排名变化、热度信息、评分等等非必须信息则根据用户关注信息点选择漏出。

1.纯文字形式

纯文字的排行榜一般是以内容(或标题)加排名的形式出现,常见以信息为主的排行榜,比如微博、知乎、今日头条等以信息为主要关注点的应用,或是搜索列表下方的热度排行榜。信息类排行榜一般以信息热度为衡量标准,因此会在标题及排位外,增加各种突出热度信息的表现形式,如关注热度人数,或是“热”“新”“爆”等等表示热度的标签,如抖音、微博。而淘宝搜索热度则是在标签外增加了上升下降的排名变化

2.图文结合形式

相对于纯文字形式,图文结合的排行榜因为图片信息的增加,使整个榜单主体占居更多的空间也可以展示更多的产品信息,辅助用户进行选择。

  • 图片形式

上榜主体图片尺寸一般会有横版、方版、竖版3种形式。头条、知乎等资讯类应用都采用传统的横版图片形式,延续了用户阅读新闻类资讯的习惯;而豆瓣、腾讯动漫等由于现实中书籍封面、电影海报等用户视觉场景都是竖版构图,因此沿用至线上使用的也是竖版图片形式;而京东、大众点评、马蜂窝则使用方版的图片形式,大概是因为产品的多样性需要考虑多种图片的适配问题。(视频、游戏类由于使用场景大部分采用横版图片形式;但由于游戏封面、宣传海报也会有竖版的形式,比如:游民星空、小黑盒)。

  • 左文右图VS左图右文

每当设计图文结合的部分,首先要考虑到底是采用左图右文还是左文右图的形式呢?可能很多人会说这两种形式没有什么大的区别啊,有什么可纠结的!或者认为由于视频、图片、文字对人类的吸引力是呈递减形式的,因此应该选择左图右文的形式。但实际上这跟我们长久以来的阅读习惯以及应用希望触达的用户类型有很大的关系。

人类对画面的阅读及扫描方式通常为三种布局方式,包括:古腾堡图(Gutenberg),Z型(z-pattern)和F型(f-pattern)。其中产品列表页中最常使用的就是F型布局模式,F型布局是雅各布·尼尔森(Jacob Nielsen)在公司进行眼动追踪研究后首次提出的。与其他模式相同的是,眼睛从上/左,水平移动到上/右,然后回到左边缘再此进行水平扫描。但在F型布局第二次扫频后,向右扫动的次数会越来越少,并且会随着向下移动,眼球会紧贴左边缘。用户也倾向于F型模式浏览浏览整个页面,即自左向右自上而下的阅读模式,越向下信息获取效率会越低

因此今日头条、知乎等需要通过文字传递给用户准确、丰富的新闻资讯类应用普遍以左文右图的形式展现。而电影、游戏、动漫等以画面触达用户需求的应用则都采用的是左图右文的表现形式,比如:腾讯动漫、爱奇艺、得物等等。

3.横排+列表表现形式

说到排行榜我们一般第一个会想到领奖台,很多平台也采用领奖台这种前三名横排+其他排名列表的结构。纯列表形式的排行榜,平台用户的注意力大部分集中在第一名,而领奖台的形式模仿现实生活中的奖励形式和仪式感,将整个排行榜的关注范围从第一名扩展至3名,另一方面排行榜的竞争关系从单一争争夺一名变成前三名的竞争关系,增加了第一名的高度。(目前这种形式我只在微博的明星势力榜及抖音的直播总榜中有看到)


榜单规则是排行榜规则的描述,是平台权威性的体现。榜单规则有些平台本身具有数据库,会有相关的平台数据支持如京东;而汽车之家则依靠“汽车工业协会”外部的数据支持,增加平台的权威性及榜单的可信度;

信息更新一般存在在榜单头部和上榜主体的中间,有些是固定时间更新,也有类似微博热搜是实时更新的模式,而腾讯动漫的更新作为用户的痛点会在延续企鹅形象的侧边栏头部标明榜单更新周期。


排行榜的成功看似是人们对于选择困难、信息获取的解决方案,但归根到底因为人们对于不确定性的惧怕,无论是信息的不确定性或是对自身价值的不确定性。而平台方利用金钱、名誉、奖励的外部激励方式,结合满足感、确定性、社交性的内在激励相互作用使得排行榜成为无论何种平台都非常受欢迎的产品功能。作为平台方因产品使用受众、产品侧重点、宣传方式的不同,排行榜会以多种入口及展现形式出现。作为设计师需要深入了解排行榜等功能背后的产品逻辑,以及用户操作行为背后的思考及心理效应,提出合理的设计,帮助用户了解产品功能,满足用户需求。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:9号自习室
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



如何选择确定B端后台设计风格及细节优化

ui设计分享达人

如何选择合适的B端设计风格?

1.B端后台分类:

根据服务对象划分:

一类支持有C端前台,支持前台产品管理各种资源。第二类服务企业,提高企业工作效率和营收。


根据后台功能:

1.监控运营:时效性强,旨在实时反馈异常情况,快速判断下达命令,回复信息、多用于数据控制中心。

2.数据分析:数据结果的对比和分析趋势,时效性要求并不高,了解整体和各部分数据水平,助力决策。

3.记录管理类:主要用于人员、设备、资产等增删改查,文本信息容量大,频繁便捷的操作。

4.系统配置:权限配置、设备功能配置,操作为主。


2.后台深浅两大风格分类:

浅色:适合文本信息多密集的表单列表类后台,浅色更符合人眼白底黑字的阅读习惯,浏览速度更快,信息获取效率更高。


深色:图像信息密集的后台适合图片、数据可视化图表等;深色对彩色的图像信息衬托更强。信息获取速度较慢,长时间可能视疲劳。


3.作者常向产品方提供的风格参考

较常见

  1. 经典商务风(导航深、内容浅)——专业、高效、成熟、可信赖(对照深色西装人物形象)

    优点:市面最常见的风格,普世性高,大多数用户可快速接受,层次分明

    缺点:视觉缺乏记忆点

 2.轻量科技感(导航浅、内容浅)——简洁、明快、轻量、年轻(对照白衬衫打领带男性)

      优点:视觉清新明快更年轻化更轻量,对其他文本及图形展示包容性高,就像A4白纸一样容器存在感弱

      缺点:纯白色导航+页面层次略暧昧。

 3.蓝色科技风(导航中、内容中)

      适合:适合科技属性强的产品界面,图像图形展示

      缺点:对其他色彩信息有干扰,持续性长时间观看易视觉疲劳

 4.暗黑科技风(导航深、内容深)

      优点:对色彩表现力强

      缺点:密集文本信息获取速度会下降,持续性长时间观看易视觉疲劳



4.精准选择风格时可以进一步的考虑:

1.整体行业风格

比如美妆和科技行业的整体设计基调就不太相同。


2.产品想要传达的气质:

理性可靠 or  简洁轻松轻量 or 关怀普世 or 酷炫吸睛….这个可以和相关产品经理、销售共同商讨


3.目标用户的群体特点及喜好。

根据目标用户的性别、年龄层、受教育水平,审美水平考量(可能包含多种角色,选取1.2个核心角色为参考)带入目标用户工作场景及爱用物常用物品味,去判断基调。

如主要用户群:40+男性用户,本科以上受教育水平,使用windows电脑进行专业管理操作,审美倾向明确内敛。

如主要用户群:20-40岁,男女比例约6:4;大专;操作水平参差


4.使用场景及高频的操作。

例如:最常使用数据分析管理,需要快速阅览多条数据,对数据进行比对,更适合浅色风格展示表单数据。


5.判断独立的平台是否为独立开发

独立开发的,可以采取更独特设计。若平台很大需要不同外包公司的合作属于整合类平台则更注重设计的包容性。


5.如何让后台设计更具特色:



  1. 重点色的使用



“731配色比例”70%的面板色,30%的导航面板色,10%的强调色。(这里的用色比例可以根据内容具体再去调节只是大概比例)品牌色或重点色:强调行动关键点、重要信息高亮、图形化说明等。强调色用就要用的像蛋糕上的樱桃。起到画龙点睛作用即可。

2.图标的优化

后台高频出现的图标,值得我们花时间去统一设计打磨,调整圆角粗细疏密,符合整体界面气质。从图标库里拖出的图标很多在线条粗细上是不统一的,好的设计在细节处也要动人。

B端工具类图标识别性第一,美观性第二。B端导航图标更多是在基础造型上打磨,不需要加花里胡哨的渐变、投影,导航图标一般在24px-16px大小,太复杂反而看不清。在区分状态的时候可以考虑加点品牌色


3.空状态小插画

空状态插画是B端设计师少有能发挥自己绘画天赋小巧思的地方。

图形化状态语言,辅助用户理解内容。可以将产品机械苍白的文案设计表现的更加具有温度,具有引导性。让乏味的工作出现一些共情小彩蛋,有趣的插图动画可以缓解等待的焦虑。



4.登录注册页

纯色背景卡片式:简单大方更聚焦登录操作

插画背景:场景化展示产品的功能及亮点,让用户更有心理预期

几何图形背景:最后和品牌图形相关,加深用户对产品的品牌印象。

照片背景:相关场景或产品类型,具象图片信息更直观


5.圆角的大小

不同大小的圆角传达产品不同的气质,大圆角亲和、小圆角精致、中等圆角大众中庸。



6.优化信息层级

优化信息层级,区分信息主次可以使阅读更快,操作更快,界面更有节奏感。

这时候你就是那个考前画重点的老师

判断一个页面里最重要的是那些信息或操作,强化它!并弱化辅助信息;

判断一个模块里那些是重要信息,强化它!



6.新人需要避免的雷点:

  1. 追求炫酷的视觉效果舍弃操作效率。比如追波风满屏花里胡哨的卡片及面板,满屏大投影及高饱和色彩。对于B端界面来说信息噪音太多,反而干扰信息获取效率。


2.反常规用户习惯的操作。尊重用户习惯,不要为了个性化去尝试改变,不要妄图改变用户的操作和认知的惯性。惯性思维大于设计思维,曾经遇到过产品因为右手操作所以要把导航放在右边的离谱例子。


3.数量多,动静大的夸张的动效。B端与C端不同的地方在于希望操作者沉浸式工作,遵循非必要不打扰。之前看过一个反面例子后台,在每一步操作后都出现大的场景动效鼓励完成,如果作为一个长期使用的工作者,我会觉得每次完成任务都需要等待动画完成可能只需要2-3s也很浪费我的时间。


4.新人建议多看Antdesign和Element等成熟的组件,创新类组件样式,最好和和开发商量是否能够实现。


5.在确定主要风格及2-5张主要页面后,就应该着手基础规范(色彩字体等,不然后面越做越乱)。


6.一段时间一个审美,同一界面中的元素风格不统一。


7.避免大面积使用高饱和高明度的色彩,及暧昧含糊的临近色彩。长时间使用眼睛会累,产生不耐烦焦躁的负面情绪。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:唐小葱
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


车载智能助手设计:智能座舱的合作伙伴

ui设计分享达人

前言:


随着科技的发展从家庭到办公室,协作机器人(cobots)正在逐渐出现在我们的视野,汽车车载虚拟形象也越来越多地涌现,例如:蔚来的NOMI,理想的ONE,奔腾的YOMI。虚拟语音助手的形象也越来越符合大众口味。虚拟语音助手形象通过改善用户体验和培养情感联系来增加汽车的价值。但是我们在使用的过程中不难发现,机器人的设计很容易出错,从而让我们感到无聊、生气,甚至更糟糕的情绪——害怕。

 

那么,汽车公司如何设计虚拟语音助手,才能创造更安全、更高效、更有回报的驾驶体验呢?

本文将通过以下几点进行阐述,让虚拟语音助手的设计创造更好的汽车体验。


1.利用UX(用户体验)来驱散对人工智能的恐惧


如果在文化的进程中,高科技在其中扮演过一个坏人的角色,那么在设计时一定要谨慎。例如,在美国,小说作家史蒂芬·金写过一本关于杀人汽车的恐怖小说,这会让用户在使用汽车的时候产生联想。

谷歌公司也深知这一点,这就是为什么早在10年前,它将其早期的自动驾驶汽车Waymo设计得如此可爱,目的是为了帮助人们更适应自动驾驶这一遥远的概念。

          undefined

史蒂芬·金恐怖小说《克里斯汀》                                 谷歌第一辆无人驾驶汽车waymo


从另一个角度来说,创建一个可爱的,温柔的,虚拟形象是为了给用户一种优越感,从而消除恐惧。

外形的设计固然重要,但是行为比外观更应该受到重视,美国时间2016年6月27日,Anki发布的玩具机器人Cozmo的产品,它的面部是一块发光显示屏(OLED),眼睛则是随心情变化的方块。因为外形相似,Cozmo被认为是皮克斯动漫《机器人总动员》中瓦力(WALL-E)的现实版。看起来比较呆萌,给人一种畜类无害的感受。并且通过笨拙的行为,展现出它呆萌的性格,大大降低了人们得戒备心理。

呆萌的机器人Cozmo

           

以黑绿色代表邪恶的斯莱特林学院                                黑绿色的Cozmo


因此即使用了一些比较可怕的颜色,例如,黑绿色。你也不会产生恐惧的心里。由此可见,行为远比外观给用户带来的感受更具有说服力,也更加直观。

当我们在设计语音虚拟助手时也是一样,无论是作为一个合作机器人,还是车辆本身,要问问自己,我想展现的AI是什么样子的,这样你就可以在它跨屏幕迁移时设计一个有凝聚力的体验。


总结虚拟语音助手的形象要降低用户的恐惧感适当的为用户增加优越感


2.不要越界


Jibo是一款设计来帮助你在家工作的合作机器人,由 MIT 科学家 Cynthia Breazeal 制造。它高约28cm,重约六镑,无法自由移动,拥有电子眼睛、耳朵和声音,头部可以 360 度旋转并进行声音定位,能够讲故事、聊天和提供安慰,也可以拍照和做日程提醒。但可惜的是它失败了,因为它承诺太多,更注重情感而不是功能,比如语音和人脸识别上存在一定的误差,并没有宣传视频里演示的那么生动;智能家居中控方面,因为要通过第三方平台实现控制,实际体验并不流畅;又比如,因为起初内容缺乏、功能未得到完善,Jibo 无法看视频、玩游戏和视频通话,除了挤眉弄眼之外,屏幕成了摆设。

简单来说就是它能做的事儿和它899美元的售价不匹配,自然就没有用户愿意为他买单。

 经营失败而倒闭的机器人JIBO


Qoobo是一款带尾巴的靠垫,可以通过摆动尾巴来安慰用户,虽然看起来也没有特别智能,但它之所以能够成功的原因是因为它的功能和价格合理。在满足基本需求时,“摇尾巴”的功能可谓是“锦上添花”。

深受用户喜爱的坐垫机器人Qoobo


在车载中也是如此,比如蔚来的NOMI,经常有用户反馈,nomi有的时候所问非所答,要喊出指定的关键词才可以做出相应的应答,但是它能够成功的原因是,它们能增加真正的价值,并在受控的环境中运营,在那里人工智能可以成为“领域的老板”。同样的在设计虚拟语音助手形象时,需要有一个明确的目的,那就是它能做什么,不能做什么。换句话说就是:在不影响我驾驶的前提下帮助我完成一些额外的工作


总结:要使虚拟语音助手成为功能清晰的服务生态系统的一部分满足用户的基本需求



3.展现它作为助手功能性的一面


恐怖谷理论是一个关于人类对机器人和非人类物体的感觉的假设,它在1970年由日本机器人专家森昌弘提出,虚拟形象或机器人的仿真度越高人们越有好感,但在相似度临近100%前,这种好感度会突然降低,因为你无法分辨某物是否是人类,这会让用户产生不安的心理。虽然车内人工智能显然不是人,但我们确实要避免这个令人毛骨悚然的情况发生。在赢得用户的信任并建立联系的同时,也需要让用户知道你的界限,并对数据的收集和使用保持透明。

undefined                          

恐怖谷理论


                       

令人恐惧的设计                                                                   看完就喊妈妈的动画


还要注意的是在设计的过程中,要区别人和人的交流以及人和虚拟语音助手的交流的交流。

机器人再说话时会说:请,你好等礼貌用语,这样父母在使用语音助手的同时,不会担心孩子学到一些粗鲁的用语

其次,我们在与功能性动物交流时,不会用人类的用语,更倾向于使用专门的动物用语。例如,在东北赶集的人,不会对马或者驴说,往前走,不要走了。而是会说:“驾”  “屡” 等拟声词来代替,一方面是为了快速的下达指令,另一方面就是区分人类用语言。

你可能会经常看到这样的新闻:某演员入戏太深,走不出自己的角色,导致发生抑郁,带来糟糕的结果。这就是用户对角色情感的过度投入,导致无法区分现实世界和角色世界。因此语言另一个用处就是:防止用户入戏太深。


总结:保持和突出语音助手该有的特征,这样可以让用户更加容易走出和进入使用场景。



4.扮演它该有的角色


paro这是一个海豹幼崽的形象,这种机器人有助于痴呆症患者的护理。通过肢体接触,可以唤醒痴呆症患者过去养育子女、饲养宠物的记忆。它的感光装置能分辨白天和黑夜,它的位置感受装置可以判断自己是处于被抱着,还是处于跟主人相对的状态。它在充电时用一个奶瓶,这和他“被扶养”的定位相吻合。

代替动物为老人治疗的Paro


undefined

正在充电的Paro


宠物机器人Lovot,当你决定要收养它们时,也要意识到它们每天半个小时闹腾,还有那被“关爱”需求,真的也许会让你累觉不爱却又割舍不了,感叹自己为什么要“养”这两个小鬼。让我们感受到,这些机器人就像人一样,它也有婴儿期,需要我们耐心教导。

宠物机器人Lovot


再比如马里奥在最早的出道作品《大金刚》中,马里奥被设定为一名普通的美籍意大利人,从他的口音(或是从他的配音演员Charles Martinet的所配的口音)来看,他的英文确确实实带有一定的意大利口音,而且从服装上也是典型的美国公民装扮。

因此,无论是外形还是功能上都要有一定的隐喻和暗示。



总结为所有情况寻找隐喻这可以让用户有一个连贯的想法无论在哪中场景都要暗示和产品相关的特性这样用户对虚拟语音助手的角色定位才会一直保持统一


5.让互动更有价值


在设计过程中,始终要贯穿的思维就是如何使虚拟形象对用户的情感做出反馈。通过设计引起用户情绪价值与情感体验。比如,通过简单应答,或者简单的肢体动作来达到目的。建立一个专属于用户的体验设计。比如引导用户给虚拟形象命名等。



总结:培养感情纽带,让用户与虚拟语音助手建立长期关系,让用户对合作机器人更加满意。

 

在未来几年内,我们预计语音人工智能的个性、年龄和性别将会多样化,车内语音助手将继续被采用,尤其是随着更多的自动驾驶功能进入市场。对于一些原始设备制造商来说,将合作机器人设计成技术的实体表现形式,以帮助赢得用户的信任,这是有意义的,当然还有其他制造商将在人机界面(HMI)中以图形方式展示人工智能,就像Siri一样,以较为抽象的方式表现出来。无论哪种形式所遵从的原则是不变的,期待大家更好的设计!


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:大牛李
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档