首页

产品体验思考

ui设计分享达人

一、好的收藏体验该怎么做？

用户喜欢在网上收藏各种东西，把收藏到的东西占为己有，满足自我的占有欲，每个用户都为此而乐此不疲。

很多互联网产品在用户点击收藏后，让用户去选择收藏夹。其实用户并不喜欢去选择，他们只想简单的把自己喜欢的东西收藏下来。



选择本身并不是一件很容易的事情，尤其是对于那些有选择困难症的人来说。实际上，我每次都是选默认那个。

这并不是一个好的用户体验。


微信收藏润物细无声

当然也有一些做的很好的体验，比如微信的收藏，收藏后会出现一个“收藏成功”的非模态反馈。

同时可以添加标签，但这个并非强制，为了满足那些有这种需求的用户。添加标签的目的是为了方便用户在日后的检索。



在收藏列表，微信会根据收藏的内容自动分成链接、文件、图片和视频等，最近使用位于第一位。

也就是说并不需要用户去创建自定义分类。


你也可以搜索标签来找到之前收藏的内容。通过这些方式基本上满足了大部分用户的需求。



拼趣（pinterest）智能识别收藏夹

网站会根据你采集的图片在极短的时间内，自动识别出图片对应的收藏夹类型。可以直接采集到对应的文件夹。

然而经过测试，经常会出现误差。因为图片的分类其实很复杂的，属于高度自定义，很显然，智能识别并不是一个好的解决方案。



花瓣的快速采集

花瓣是一个设计师收集灵感的网站，该网站常见的用户使用场景是，设计师在浏览素材时，会大量采集自己感兴趣的素材，但每次都要选择文件夹，非常繁琐且低效。

后来花瓣网加入了快速采集的功能，其逻辑是网站会默认选择上一次采集的收藏夹，这大大提高了用户采集图片的效率。

而如果你需要选择其他文件夹则可点击普通采集。这两种采集方式满足了设计师的不同需求。


二、互动信息的隐私保护

社区类产品有各种点赞，收藏等互动信息，但用户又不想被别人知道这些信息。

因此，在规划产品时需要考虑到用户互动隐私的保护，这是用户侧的刚性需求。


私密的点赞列表

抖音个人主页的点赞列表，我记得刚开始是公开的，且不能设置为私密。

用户点赞的视频会出现在这里，却少有人希望这些信息被别人看到，总有些点赞视频你并不想被别人看到。

如果点赞列表可见，那么用户在点赞的时候就会有所顾虑，这不利于平台的互动率。


特别是随着抖音上熟人也越来越多，强关系社交场景在渐渐加强。


抖音后来也发现了这个问题，把它设计成了默认隐藏。（当然可以自己设置为公开，但只有极少数用户会这样做。）



由于点赞是私密的，用户可以随心所欲的点赞自己喜欢的视频，毫无社交压力。


这是为何？

源于人性心理学：窥私欲。人人都喜欢窥视别人的隐私，而不喜欢自己的隐私被窥视。

不然为何如今的QQ空间基本上都设置了权限，毕竟，谁想被别人窥视当年那个煞笔的自己呢？


公众号“在看”和视频号“私密赞”的逻辑

现在订阅号打开率越来越低，朋友圈分享曾是订阅号流量来源的一大入口。

朋友圈早已沦为了一个人设打造的阵地，现在的人发圈越来越谨慎。

用户似乎越来越不愿意在朋友圈分享文章了，除非是有利于自己人设打造的内容。

为了减轻用户的这种社交压力，微信推出了“在看”的功能。


用户点了“在看”后，此文章会出现在看一看这个模块，且七天前的分享将不可见，这就相当于一个弱化版的分享功能。



这将大大减轻用户分享的社交压力。对于公众号主来说，相当于增加了一个流量入口，激发他们创作更多的内容。


视频号点赞也是同理，会被朋友看到，导致用户在点赞的时候就会有所顾虑。


他会考虑，我点赞了这个视频，我老师、上司、父母、亲戚、朋友会不会看到？他们会怎么想？


但他在抖音上点赞是没有这么多顾虑的，单纯的喜欢就行。


第一，抖音是弱关系平台；

第二，抖音上的点赞默认是私密的。


因此，微信才推出了私密赞的功能，需要长按才能触发。

这并是一个优雅的解决方案，一是操作成本有点高，二是用户存在较高的学习成本。



微信作为一个强关系社交场景，这正是微信与抖音不一样的地方。

以上两者的目的都是一致的，那就是为了减轻用户的社交压力。


三、确定按钮放左边还是右边？

同时用过mac OS和windows系统的用户不知是否发现，这两个操作系统的弹窗按钮“确定”和“取消”的位置是不一样的？



mac的弹窗按钮确定在右，取消在左；而windows的刚好反过来，确定在左，取消在右。


为什么会有这样的差异？哪一种更加合理？


模态反馈定义

在交互设计中，这种弹窗叫做模态反馈，艾伦·库珀在《About Face 4》中提到：模态模式一种临时模式，它通过遮罩将用户当前看到的内容和之前看到的内容区分开来，界面中只有 popup（弹出层）组件具有可交互行为，需要用户操作才能退出该模式。模态的优势在于让用户专注于完成某个任务而不被干扰。


哪个优先级更高

首先我们要明白这两个按钮哪个使用率更高，一般来说，“确定”的点击率要远远高于“取消”。这是因为大多数用户对于自己的操作行为是明确的。


所以这两个按钮在视觉上一定要做出差异化，“确定”的视觉层级要高于“取消”，这样用户才会一目了然，不会感到困惑。


两者背后的逻辑差异

回到刚才的问题，逆向思考这两者背后的逻辑差异。


windows弹窗的背后逻辑：

人的阅读习惯是从左到右，所以把点击率更高的按钮放在左边更加符合人的正常阅读习惯。


mac弹窗的背后逻辑：

根据一般的任务的流程，“取消”在左代表返回上一步操作，而“确定”在右代表进入下一步任务流程。


看上去似乎都有道理，这两种交互方式本身没有绝对的对与错。只要在整个系统中保持一致性，让用户形成操作习惯就没有啥问题。


从个人的使用习惯而言，个人更倾向于mac的这种方式。



四、手机的实体键怎么放才合理？

手机上的实体按键电源键和音量键通常有两种分布方式，放在左右两侧或都放在右侧，前者以iPhone为代表，后者以安卓手机为代表。



这两种方式有什么区别？哪种方式更加合理？电源键和音量键属于完全不同类型的两种按键，且都是高频使用，它们的功能自然不用赘述。


用户场景

我们先来看看都放在右侧会有什么问题，以下使用场景相信用户不会陌生：


用户a，在地铁上玩王者，声音有点大，想把声音调小，结果不小心按到了电源键，导致手机息屏，而此刻你正在激烈的团战，内心有一万只“草尼玛”奔腾而过……


用户b，每次按电源键（解锁或锁屏）都会不小心同时按到音量键，结果直接就截图了！这种情况发生了不止一次，因为这两个按键离的太近了……


用户c，自家的小米11，电源键位于中间位置，右手拿时大拇指会触碰到，左手拿时中指刚好会触碰到，而电源键又有指纹锁功能，导致手机在不断的解锁，而你毫无察觉……


通过上面的案例，可以得出结论：若按键都放在右侧，会导致用户经常误触而造成不必要的麻烦。


放在两侧就不会有这样的问题。可以有效防止误触，尤其是盲按，不用担心按错，减少误操作的几率。


电源键并非一开始位于右侧

值得一提的是，iPhone手机的电源键一开始是位于顶部位置，这是为何？



因为刚开始时手机都是小屏幕（3.5～4寸左右），对于iPhone5S及以前的手机来说，单手操控，拇指Home，食指电源，刚刚好。


所以电源键放在顶部既按得到又可以减少误操作。


后来随着手机大屏的趋势（4.7寸以上），这个时候单手已经不方便按到顶端了，从6代开始就把电源键放在右侧了。


但无论是哪种方式， 两个按键都是分开放。


按键不在中间的原因

还有一个小细节，iPhone的实体键不是在右侧正中间，而是在靠上的位置。



iPhone设计理念是单手持握，并且大多数人右手握手机，大拇指经常会碰到右侧边框，若果放中间，这样会造成误触音量键和静音键。


其实上面的案例3就已经说明了按键放在中间的弊端。


我想起了当年的锤子T1，左右按键一样大且位于两侧的中间，这是典型的为了追求完美的对称而向用户体验妥协。

iPhone从初代开始就已经建立了自己的设计理念，不管是工业设计还是界面设计，并沿用至今。



五、iPhone静音键有存在的必要么？

从初代开始，iPhone机身左侧音量键上方就有一个静音键。

这些年来，iPhone一直在减少各种实体按键以及外部接口，比如3.5mm耳机孔、home键。

但直到如今这个静音键却一直保留下来，为何iPhone对于这个按键情有独钟？



静音键开启后，任何来电或通知都是无声的，震动也会消失。

在无需点亮屏幕的情况下实现一键静音，方便快捷，深受用户的青睐。


哪些场景用户会开启呢？

根据自身的使用习惯以及用户研究，无非以下几种使用场景，比如看电影、开会、上课等：


1.进电影院看电影前，我一般都会拨一下，避免在看电影的过程中被来电铃声打扰，影响了自己和别人观影。

2.开会的时候也会拨一下，以防在开会的时候突然被来电铃声所打扰，避免不必要的尴尬。

3.学生党在上课前一般也会开启，这样整节课都不怕打电话进来了。


总之，就是不希望自己的手机铃声打扰到自己和别人，带来不必要的麻烦。


如果是虚拟静音键，需要先解锁手机，对着手机屏幕一顿操作。

而实体键不需要这么麻烦，可以盲操作，放在裤兜里都不影响操作。


安卓手机为何没有实体静音键？

这个按键这么重要，却很少看到安卓手机上有（除了一加基本上没有）。

实体静音键并非苹果首创，之前的Palm、Blackberry（黑莓）早已有这样的设计。


可能的原因是安卓控制中心很早有静音按钮，甚至有些定制系统还可以把静音按钮直接放在桌面上，设置静音非常方便，也就没必要再多加一个实体键了，显得多余又徒增成本。


一加三段式按键

上面提到过的，作为安卓阵营唯一的静音键，一加手机引以为傲的三段式按键，该设计可以通过物理键直接实现在静音、免打扰与正常模式当中快速切换。



但个人认为这个设定复杂了，三种模式远比两种模式复杂。用户并不一定能搞明白，有一定的学习成本。


iPhone设计静音实体键的初衷

在早期，iPhone的控制中心并没有静音按钮，想要设置个静音并不是一件容易的事情，而这个功能又是必须的，苹果索性直接做了一个实体物理键。


这样静音的时候只需要把静音键拨过来就可以了，一步到位，使用体验也很好，所以一直保留至今。


虽然现在iPhone的控制中心已经加入了勿扰模式，但考虑到老用户的使用习惯，以及品牌调性，苹果对于这个实体按键的去掉还是显得很谨慎。


考虑到之后iPhone在防水、机身内部空间的改进，不排除苹果终有一天会取消iPhone上这个静音键。


静音键的缺点

静音键虽好，但也并非没有缺点。用户有时候会无意中触发这个按键而不自知，或者开启后忘记关闭，导致错过了一些重要的电话。


静音并非绝对

虽然开启了静音键，但并不是绝对的静音。如果是闹钟，铃声还是会响起，因为闹钟的优先级要远高于静音模式。

苹果这是考虑到了如果有用户不小心触发了静音键，或者开启后忘记了关闭，害怕用户耽误了重要事情。

这就很好的解释了为何明明开启了静音模式，却还可以调解音量大小的原因所在。细微之处方见真功夫。



六、经典的旋钮式交互

在日常生活中，旋钮是个很常见的东西，比如音箱，微波炉，收音机，老式电视，车载旋钮……

在机械产品上，旋钮凸起的把手和它下面的圆盘刻度，是最明显不过的旋转暗示，符合人的自然感知。



旋钮式交互是个人非常偏爱的一种交互方式，我认为这种交互跟iPhone的home键一样经典，主要原因有三：

1.操作简单

旋钮操作简单，看到这种按钮，一岁小孩子都会忍不住用手去抓。对于用户来说，几乎不需要学习成本。

2.尽在掌控

在旋转的过程中，可调大调小，一切尽在用户的掌控之中，用户感觉到有十分的安全感。

3.即时反馈

在调节的过程中，调大调小都能立刻收到即时的反馈，这是用户最喜欢的交互方式。


我们在触摸屏上很少看到这种旋钮式交互，因为这种交互是要建立在抓住旋钮实物的感受。

而触控屏是个二维的世界，没有真实抓握的手感，无法还原出三维世界的真实手感。


汽车上最常见的旋钮就要数音量和空调了。然而自从特斯拉在车上推广大屏幕后，越来越多的国内厂家开始盲目跟风，把绝大部分的功能按钮集成到屏幕中，比如空调，不仅不方便，行车中使用还容易造成危险驾驶。



车上的触控体验跟手机上是完全是两码事，使用场景也完全不同。最大的区别在于后者没有安全问题。

都知道开车不玩手机，可是行车时操作中控屏跟玩手机有什么两样？


车载旋钮有什么优势？

1.驾驶更加安全

对于驾驶员来说更加安全，通过旋钮调节空调，熟悉后完全可以实现盲操，边开车边操作毫无压力。

如果是触控屏，你必须看着屏幕，一顿操作猛如虎，而在开车过程中眼睛哪怕离开前方一秒钟就意味着危险。

而安全是汽车驾驶的重中之重。

2.更加真实的反馈

用户的操作有真实的物理反馈，旋钮阻尼。

屏幕上虚拟按键反馈根本无法与实体旋钮相提并论。

3.更加稳定的机械结构

软件系统用久了会变卡，可能会死机，难免会有bug。而这些不稳定因素将成为汽车驾驶的潜在危险因素。

一旦屏幕失灵，或者系统死机了，那所有按键都失效了。

虽然特斯拉为了提升其车载系统的稳定性下了很大功夫，但是问题从来都没有停止过。

但是硬件基本上很少会出问题，物理旋钮才让人100%放心。



无论厂家如何吹嘘，虚拟屏幕按键在大多数情况下都不会比实体按键有更好的使用体验。

因此，有一些实体键出于安全驾驶的考虑还是应该保留，将各种功能按钮都集成在屏幕里并不见得是一个明智的选择。盲目的把实体按键变为触摸按键存在安全隐患。
文章来源：站酷   作者：CdzhcHappy

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


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

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

评论(0) 浏览(1642)

数据分析的正确打开方式

ui设计分享达人

作为一枚设计小萌新，对上述场景，是否似曾相识呢？此些尴尬的情况，也映射出了不少问题：数据化设计意识薄弱，数据基础知识模糊，缺乏系统的体验评估模型和度量方法等等。


那么，我们该从哪些维度进行数据分析呢？数据的基础知识又有什么呢？常见的数据分析方法又有哪些？诸位看官抓好扶好，入门版航班即将起飞，让我们一起走进数据的世界，掌握一定的数据分析能力，告别“我要我觉得”的任性决策。





增量尚不明确，存量博弈的下半场，都以去肥增瘦的方式，宣告着精细化运营的时代到来，似乎也对设计师同学提出更高专业的要求。数据意识作为能力象限中的某个小瓦块，虽然细微，但也是专业输出的切入点。


在面对产品功能迭代、用户行为分析、日常监测、设计决策以及效果评估等等问题时，单纯的从视觉维度进行推导，会稍显单薄。而基于客观数据的分析，可以更科学准确的辅助我们进行决策。





所谓的“数据指标”，简单来说就是可将某个事件量化，且可形成数字，来衡量目标。在一定程度上，“数据指标”能揭示出产品用户的行为和业务水平状况。


目前市面上的产品种类繁多，大致都围绕“用户是谁、做了何事、结果如何”进行归纳整合，分别对应着用户数据、行为数据、业务数据三类指标。



用户数据：包含存量、增量、留存及渠道来源四类

1. 存量：反映某一时间段内活跃的用户数。以日活（DAU）、周活（WAU）、月活（MAU）维度进行统计。其中，Active需以关键用户的自发行为来进行定义，常见的动作有登录、浏览内容等。

2. 增量：一般用新增用户数来反映，同样分为日新增（DNU）、周新增（WNU）、月新增（MNU）三类统计维度。其中，增量的定义相对模糊，需提前与渠道确认好新增指标，建议根据内部的账号体系进行指标的取舍，选择新增注册用户还是新增设备数。

3. 来源：用户从何而来，包含自然搜索、产品导流、好友邀请等多种渠道。结合不同渠道用户的数据表现，可以指导后续的推广方案。

4. 留存：通过留存率来评判产品的健康程度，表示新用户在一定时间段内，某些行为重复发生的比率。其中，日留存和月留存的评判分析作用又有所不同：

  • 日留存：作为衡量用户渠道质量的重要依据，如老王的公众号在站酷、知乎、微信群进行导流宣传，通过分析不同渠道的用户留存表现，从而优化受众用户的投放来源。

  • 月留存：作为用户粘性的重要判断，通过指标来分析产品对用户是否长期有吸引力。也可用作产品上新后，功能迭代是否符合预期的判断依据。


行为数据：记录用户使用产品的相关行为，可包含行为质量（访问深度、转化率、跳出率、用户停留时长）与数量（次数、频率、点击率、访问时长）两维度

1. 访问深度：用户单次浏览页面的过程中，浏览了页面的数量越多，表示用户访问深度越深，产品粘性较好。

2. 转化率：指在一个统计周期内，完成转化行为的次数占总访问次数的比率。转化率=(转化次数/点击量)×100%。如在电商、理财等产品中，转化率是衡量产品优秀与否的重要指标之一。

3. 跳出率：访问了单个页面的用户占全部访问用户的百分比，可用来衡量访问质量，高跳出率通常表示内容或体验与用户目标脱节。

4. 停留时长：用户游逛的时间长度，需要区分对待内容消费与工具效率场景，高停留时长并非全是正向反馈。

5. 次数：包含页面访问次数（PV）和用户访问次数（UV），通过页面或者用户作为计数单位，但需进行相应数据去重，保证数据的真实性。

6. 点击率：CTR（Click-Through-Rate）即点击通过率，某一内容被点击的次数与被显示次数之比，CTR是衡量互联网广告效果的一项重要指标。影响用户点击的因子较多，作为入口级内容，却具备较大的设计发挥空间，可通过信息的布局与核心利益点的外化，实现行为号召（Call to Action）


业务数据：产品在商业化过程中，对业务结果的贡献程度，如总成交量、人均消费金额、消费人数、续费率、用户周期价值等

1. 总成交量：GMV（Gross Merchandise Volume）属于电商平台企业成交类指标，主要指订单的总金额，包含付款与未付款两部分

2. 人均消费金额：ARPU（Average Revenue Per User）即每用户平均收入。这个指标计算的是某时间段内平均每个活跃用户为应用创造的收入。

3. 续费率：指的是在订阅期结束时，选择续费的用户占所有应续费用户的百分比

4. 付费率：付费用户占活跃用户的比例。

5. 用户周期价值：LTV（life time value）是产品从用户获取到流失所得到的全部收益的总和，当LTV大于平均获客成本和后续的运营成本时，产品获得净收益。






对上述数据类别有所了解之后，我们在面对纷纭复杂的应用类型与数据概念时，到底该怎么选取合适的指标进行衡量和分析呢？接下来，让我们进入下一个知识点-指标建模。我们大致可以按照以下方法进行关键指标的选取。

① 明确业务的最终目的；

② 判断业务模块所属类型；

③ 根据模块类型选择数据指标；


① 明确业务的最终目的

任何产品都有其商业或生存目的，且通常会使用一些支撑手段的工具、或是支撑手段的手段来达成目的。我们以“设计软件-Figma”为例，进行业务目的与手段的拆解。

1. 目的：Figma 是一个基于浏览器的协作式 UI 设计工具，其最终目的是完成商业变现，让更多用户付费购买。

2. 手段：为达成这一目标，而采用基于web的模式这一手段，极大的方便了团队协作办公的需求，继而备受青睐，普及率节节攀升。

3. 支持手段的工具：此外，借助开源的插件及完善的组件功能，为设计创作者提供更便捷的工具支持。



② 判断业务模块所属类型

在从业务的最终目的出发，梳理业务模块后，可进一步的拆解该业务模块的具体类型。为方便理解，可以按照产品价值，将功能模块分为4种类别：工具、内容浏览、社区、交易。

1. 针对本身自带价值属性的产品，按照帮助用户节省时间和消磨时间可分为：

工具类：剪映、轻颜相机、飞书文档及翻译查词等
内容浏览类：各类图、文、音视频体裁的消费内容，如短视频、喜马拉雅、知乎等


2. 另一类产品本身不产生价值，通过自身的平台属性来连接资源，同样按照帮助用户节省时间和消磨时间可分为：

社区类：小红书、即刻、微博等
交易类：电商板块、会员付费板块以及直播打赏充值等


③ 根据模块类型选择数据指标

按照时间与价值维度，将产品划分为4类模块，每类都有各自需要核心关注的指标要素


下面对4种分类的功能模块，分别介绍如何选取指标体系

1. 工具类：通过产品达成个人目标，高频的使用行为，可以培养用户的固定习惯。因而可主要关注使用量、目标达成率、频次数据指标。（示例：剪映）


2. 交易类：以详情页作为用户购买动机的诱因，实现付费转化。倘若能多次反复的购买商品或服务，整体转化效果更佳。因而，可选取详情页转化率、客单价、复购率作为衡量指标。（示例：百度网盘）


3. 内容浏览类：用户是否已获得更优质的内容，愿意投入更多的时间浏览内容，并能触发与内容的互动行为。因而可选取浏览数、浏览广度、浏览时长和互动行为作为衡量指标。（示例：快手）


4. 社区类：社区环境主要受人与内容、以及人与人之间的关系影响。鼓励用户发布内容，以创造的内容来吸引其他用户产生共鸣，从而进行内容创造与互动行为。因而，可选取发布量、互动量、用户间的关系密度作为衡量指标。（示例：即刻）





在产品迭代发展的过程中，掌握有效的数据分析方法，能让冰冷客观的数据鲜活起来，为决策提供判断依据。接下来，就给大家推荐两类高频数据分析方法，请注意查收。

AARRR模型

由Dave McClure 2007提出的客户生命周期模型，可以帮助大家更好地理解获客和维护客户的原理。其核心为AARRR漏斗模型，对应着实现用户增长的5个指标：

1. 获取(Acquisition)：用户如何发现（并来到）你的产品？

2. 激活(Activation)：用户的第一次使用体验如何？

3. 留存(Retention)：用户是否还会回到产品（重复使用）？

4. 收入(Revenue)：产品怎样（通过用户）赚钱？

5. 传播(Refer)：用户是否愿意告诉其他用户？

我们在进行数据分析的时候，应该考虑用户正处于AARRR模型的哪个部分、关键数据指标是什么、对应的分析方法又是什么？


漏斗分析

科学反映用户行为状态以及从起点到终点各阶段用户转化率情况，是一种重要的分析模型。广泛应用于网站和App用户行为分析的流量监控、电商行业、零售的购买转化率、产品营销和销售等日常数据运营与数据分析的工作中。

例如：在完成电商购物行为时，共包含浏览选择、查看详情、添加购物车、生成订单、支付等环节。通过监控用户在流程上的行为路径，漏斗能够展现各个环节的转化率，直观地发现和说明问题所在，更快定位出某个环节的具体问题。






除了需要了解分析方法之外，还需要提防以下数据分析常见谬误，避免落入陷阱之中，从而做出错误的决策。

1. 数据偏⻅

在分析数据时受个⼈偏⻅和动机的影响，即仅选择⽀持你声明的数据，同时丢弃不⽀持声明的部分。“数据偏⻅”将让数据的客观性荡然⽆存。 避免这种谬误的⽅法是在分析数据时，尽可能收集相关数据，并询问他⼈意⻅。


2. 采样偏差

在做抽样分析时，选取的样本不够随机或不够有代表性。例如，互联网圈的人极少会使用PDD，为何该应用还会有这么好的市值表现？


3. 因果相关谬误

将两个同时发生的事件，判断为因果关系，忽略了其中间变量。例如，隔壁老王生了个孩子，同时种了一棵树。孩子和树都随着时间的推移而长高，在一定时间内，如果使用相关性分析，可以得出这两个变量具有相关性。然而我们都很清楚，孩子长高和树长高之间，并不具有因果关系。


4. ⾟普森悖论

即在某个条件下的两组数据，分别讨论时都会满足某种性质，可是一旦合并考虑，却可能导致相反的结论。避免“辛普森悖论”给我们带来的误区，就需要斟酌个别分组的权重，以一定的系数去消除以分组资料基数差异所造成的影响。


5. 定义谬误

在看某些报告或者公开数据时，经常会有人鱼目混珠。「网站访问量过亿」，是指的访问用户数还是访问页面数？


6. 比率谬误

谈论此类型指标时，都需要明确分子和分母是什么。另一方面，在讨论变化的百分比时，需注意基数大小。如小王和小刘体重都上涨了10%，但二者的体重基数分别为60kg、90kg。

文章来源：站酷   作者：美工李大强



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


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

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


评论(0) 浏览(1912)

2022追波设计流行趋势

周周

为了保证这篇文章的质量，追波年度的每个作品都超过550赞。在此原则下挑选了828件作品，作品总的大小为2.2G。


相比于《2020年追波设计流行趋势》多出了328件作品。


总结

从挑选出的828件作品中，排名前十的作品中9件为B端设计，另一件作品也是B端产品C端化的产物。其中：

B端界面设计占比476/828，57.4%；

C端界面设计占比180/828，21.7%；

视频动效作品占比223/828，26.9%；


明眼人都能看出其中的比重关系，B端设计再次大火，为什么是再次？因为B端设计之前火过，只不过没有赶上一个好的时代，在C端设计风光的十年里而忽略了其存在。随着C端市场饱和与数字化的浪潮下，实体经济、ToB 、ToG的产业再次迎来了它的曙光。视频动效的作品占比也已超过C端界面设计，相信今年视频动效作品占比还会再次提升。



追波年度最佳作品

追波年度最佳作品来自大家最熟悉的UI8团队中的Tran Mau Tri Tam ✪，作者来自越南西贡，最佳作品截止目前355K浏览量，2933个赞。


为什么看似平平无奇的作品却能获得追波年度最佳作品呢？既不是C端也不是纯B端的作品，更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮，你可以理解它就是一个平面作品，一个字体加几何形体构建的作品，为了丰富画面的层次，让画面更加的活泼采用了多彩加几何色块，让标题阅读有停顿感和呼吸感。faster底部的横线让它从标题文字中脱颖而出，这种使用线条突出重要信息的设计也是今年追波设计流行趋势之一。


MetroUI是Windows8的界面设计语言，在2010年至2013年间曾经风靡一时，那也是移动互联网的发展元年，现在国家推行实体经济、数字化带动To B 、To G 的发展元年，通过几何色块（MetroUI）实现B端产品与C端设计风格的传承与衔接，你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风，毛玻璃的多彩高斯模糊渐变风，年度作品当之无愧。


最后来看下按钮的设计，正常的按钮要么文字加色块，要么左图标加右文字，它设计成左文本加右图标，更加注重信息的可读性和易读性，也体现B端设计重功能和交互体验，视觉点到为止的设计理念。


下面我们来欣赏年度最佳作品里面的流行趋势吧。


易读性（停顿感）

字体三原则：可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章，肯定设计文章的内容可读性更好。易识性是用在字体设计上，不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关，因为我们都需要编排文本。当我们小时候写作文时，不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感，更加适合用户阅读。


通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容，丰富文本内涵。比如情侣间表达爱意时会输入文本，“我爱你”、“我Love你”、“我ai你”、“我❤️你”，哪个更加会有情感共鸣呢？不言而喻，相信你心中已经有答案了。



曲线

在标题文字上添加曲线来突出重要文案是2021追波最流行的趋势之一，第一个设计目的就是突显文字，其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中，签字的文本都是手写体的感觉，手写体对比电脑的机械字体会带有一种人文气息，也会让两者之间产生一种对比、矛盾。


除了突显文本外，曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试，通过真实用户眼睛浏览界面显示对应的热点图。



多彩高斯渐变风

多彩高斯渐变风是从色彩的角度来传达和丰富画面的，多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程，多彩渐变多为冷暖对比来制造画面的冲突，需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。


多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新，给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上，为了更好的传达信息需要去设计与内容相匹配的视觉风格。




B端界面设计


侧边栏Sidebar

B端设计的火爆带动了B端相关模块设计，更多的人也愿意尝试B端相关模块设计，侧边栏作为产品架构中重要的导航系统，好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果，也是受限于PC屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。追波的B端产品设计已经不再是假大空概念设计，而是一套实用美观可落地的设计。



仪表盘设计

仪表盘设计是一个很好的隐喻，想象一下开摩托车或汽车主驾驶前面的屏幕，汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态，大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据，团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同，自定义的仪表盘也各有差异。重要的是突显数据和业务状态，需要分层级系统性去思考和设计。



流程设计

复杂的事情简单化，简单的事情标准化，标准的事情流程化，流程的事情自动化。流程设计是每一个企业核心功能和业务，可自定义的管理流程系统搭建也是B端产品设计的难点，需要对业务高度抽象，让每一个业务人员可自定义的流程才是好的流程设计。



B端C化

B端C化是B端产品设计的视觉表现力慢慢往C端产品设计的视觉靠齐，国内B端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外，由于业务的发展，B端产品也开始移动化、智能化，国内主流还是通过小程序、H5来现实B端产品C端化。



轻代码化

轻代码化是一种低代码赋能无代码的方式，弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时，又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统，轻松实现多元业务场景的数字化管理。


轻代码化将功能进行打包，升级成全局可以用的配置，技术人员配置好后，业务人员在应用编辑时直接选择使用模版，绑定对应的变量即可使用。




界面设计技巧


人文气息

为什么人加色块的组合方式能流行起来？还是B端行业流行带动的。B端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外，还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起，这种人文气息和价值观已经就不言而喻了。


当然企业也需要进行营销，抓人眼球。几千年来的遗传证明了，人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。


这种风格更适合大公司，国内的一些手机厂商OPPO、VIVO等也会通过手机+背景+人物来体现科技与人文的结合，而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。



毛玻璃效果

毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的顺应当下UI扁平化的设计趋势。苹果Mac OS Big Sur系统的图标、界面中运用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三维彩色玻璃的视频教程可以在B站搜索“透光艺术-C4D创建彩色玻璃的4个技法”，完全能满足UI设计师。当然还有一个好消息就是Mac用户可以享有OC一年免费的使用权，具体安装购买方法可以上“某宝”就可以轻松搞定，真香。




轻拟物

轻拟物这几年一直流行，在UI设计中趋于稳定的位置。从写实到扁平再到轻拟物，其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光（环境光）五个部分的处理。写实三维的图标等设计更适用于简洁的画面中，扁平等设计更适用于复杂一点的界面中，比如B端产品界面中的功能图标。轻拟物可使用的范围更广，效果更佳。Sketch、Figma软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。




简洁设计

简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则，在B端产品界面中更加需要简洁设计，我们最熟悉的Sketch软件界面已经是相当的简洁了。回到现实当需求功能不断增加，产品界面的编排如何取舍，如何保证界面的简洁是设计师需要深度思考的问题？如何与上级沟通？该功能是否可做可不做？是否需要埋点用数据说话？如果只是一味竞品有我们就需要有，功能不断累加只会让界面越来越重。



几何图形

几何图形和几何插画有异曲同工之妙，几何图形多为产品界面和宣传内容的抽象，产品界面的几何图形多为占位符形式，加上色彩和几何色块让其成为一个整体。B端产品视觉设计C端化的进程中，几何图形、几何色彩不失为最好的突破口，相信今年追波B端产品的视觉设计一定会更上一个台阶。



几何图形另一个场景化的地方就是品牌，作为一名UI设计师一定会经历从图标到几何图形到品牌设计的过程，品牌设计的技巧基本还是以几何图形为主，至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。



暗黑设计

暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大，如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳，提高在夜间使用的可读性。


在设计暗黑主题时，不能为了突显视觉上的逼格，而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design给出了暗黑主题的设计准则，即正文和背景之间的对比度应至少为15.8:1。按照此标准设计，可读性都还不错。这里介绍一个插件“Stark”（Figma、Sketch、XD、Chrome插件）用来测试界面的对比度。



模块化（组件化）

为什么叫模块化，而不叫组件化，组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面，但在B端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提，是否有从0到1搭建B端产品组件的经历是设计师一生中最宝贵的经验之一，它能提高设计师的系统化思维、逻辑思维和抽象思维能力。


产品模块化设计就是将产品分成几个部分，也就是几个模块，每一部分都是具有独立功能，具有一致的连接接口和一致的输入、输出接口的单元，相同种类的模块在产品族中可以重用和互换，相关模块的排列组合就可以形成最终的产品。通过模块的组合配置，就可以创建不同需求的产品，满足客户的定制需求 。




插画

插画作为设计的一大品类，不同的插画师都有自己擅长的风格，本质是都有自己的个性，但是在产品设计中更多是需要共情、共性来讲故事，表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合，插画不会过时，而是需要结合当下和产品找到最匹配的设计风格。



几何插画

几何插画算是插画简化的一种表现形式，人和物的形态不再写实，而是抽象成几何图形拼凑的感觉，同时保留人物形态的神韵。加上几何色块与人物交互形态的表现，传达出简洁、科技的现代感。难点还是在人物形态的表现上，平时多练习练习速写还是很有必要的。



线面插画

线面插画最近一两年非常流行，准确的说是非常适合。首先线面插画主要是由线条和块面组合而成，用块面表现人物形态时某些结构会表现不出来，这时候用线条简单勾勒后，结构就会清晰明了。其次当线面插画运用在界面上时，可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时，还能保持界面的干净整洁。




动效


微交互

界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。C端产品微交互和动效已经很成熟了，一部分功劳来自iOS系统原生自带的效果。B端产品的微交互和动效更多还是在学习海外产品，还需要给前端工程师灌输微交互和动效的设计价值，共同打造产品体验细节。



Mg动画

Mg动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。




三维


三维图标

MacOS Big Sur系统图标的更新带动了三维图标的流行，三维图标的应该场景还是需要有较大留白空间的界面，因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上？设计师应该保持开放多元的视角。设计本身也在不断的演化融合，存在即合理。合适最重要，它们都会有适合自己的场景和设计价值。



轻三维

为什么轻三维在界面设计中占有一席之位？一个是设计师不断追求差异化的产物。另一个是更好的表现内容，并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素，比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等，这些都是用户日常使用系统软件常见的元素，通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角，结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加，特别是当下流行的毛玻璃效果，玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光，局部的渐变色或环境光更佳出彩。



P4D（PS+C4D）

P4D是PS加C4D的设计表现技法，也是视觉设计的最后一个环节，通过PS对C4D的渲染图片进行调色，利用PS的调色技巧可以很好的解决C4D打灯光的瑕疵，还可以利用PS强大的合成功能，将渲染图片与图片素材进行合成，来表现画面的视觉度，当然三维软件比较难实现的水、粒子、烟花等效果，也可以通过PS的后期合成来实现，这也是P4D的强大之处。



卡通IP

卡通IP设计最近三四年技术的迭代已经慢慢的走上成熟，卡通IP也从传统的纯PS手绘技法，转到C4D建模—角色绑定—MD衣服制作—OC渲染—PS（静态）/AE（动态）调色。


卡通IP火的本质更适合做营销，相比于品牌或Slogan，卡通IP具有亲和力和画面感。随着各种手办行业大热，受互联网大厂影响下，卡通IP已经是互联网B轮以上公司的标配了。如果团队中没有这样能力的人，也可以通过绘制好二维，一套三维可以选择外包完成。


对于UI设计师来说学习是有成本的，暂时并不是必备技能，如果喜欢完全可以学习，从设计差异化的角度来看三维视觉确实有一定的竞争力。



三维动画

C4D三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感，未来在AR/VR领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中C4D软件对于域、动力学还是有一定的优势。



总结

上一次写追波流行趋势还是两年前了，通过两年的沉淀对趋势流行有了更深的认知。十年的互联网行业风风火火，随着最近的互联网裁员潮大家也慢慢的进入到反思层，客观的看待和理解这个真实的世界，曾经的流行趋势也需要慢慢的沉淀下来。


存在即合理，趋势流行稍纵即逝，注定是不长久的，只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注，因为哪有什么所谓的创新，只不过是旧元素的重新组合，并符合当下这个时代人的审美需求。香奈儿的“时尚易逝，风格永存”大概就是这个意思吧。


6000多字的设计流行趋势，希望能帮助设计师度过互联网裁员的寒春。最后希望以后每年坚持输出设计流行趋势。为设计行业奉献微薄之力。



文章来源：站酷   作者：水手哥

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


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

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

评论(0) 浏览(2364)

UI设计师交互设计-B端选择器设计要点

周周

对于B端选择器的交互逻辑使用场景的分析

之前总结了B端表单页设计的一些问题，其中信息录入是比较重要的部分，信息录入中选择录入是最为常用及复杂的组件，平时工作中遇到的相关问题也是最多的，此次针对选择录入常用组件的应用场景和交互规则进行总结

选择录入的类型比较多，可以简单的分为两大类即

基础选择组件：单选/多选/开关/下拉选择

复杂选择组件：时间/日期/穿梭框/级联选择/树形选择等

B端表单业务场景比较多，很多场景具有通用性，有的场景却有一定的独立性，需要了解场景及用户的需求和组件的适用性才能提高用户操作体验和效率 

一.单选框

单选框(Radio)是表单中比较常用的控件，它通常被用来从一组互斥的相关选项中选择一个单独的选项。

当点击一个未选中的单选名时，它会被选中，其他按钮为未选中状态。英文命名Radio来源于旧收音机上的按钮，用于旧收音机不同频道的切换，当一个按钮被按下时，其他按钮会弹起，使被按下的按钮处于唯一被选择状态的按钮。

  • 使用场景

1.当用户需要在一组互斥的选项中进行单一选择时使用单选框；如果要进行多个选择，推荐使用多选框。

2.当选项数目在2-7个之间时使用单选框；如果选项超过7个，推荐使用下拉框。

3.如果有两个含义相反的选项，如“同意”和“不同意”，“接受”和“拒绝”等，建议使用一个多选框或者开关勾选为同意，不勾选为不同意。

4.如果每个选项都有同等的优先级，没有推荐选项时，使用单选框；如果需要向用户推荐某个选项，可以使用下拉框。

5.如果提供给用户的选项很熟悉，看了第一个选项就能预见到所有的内容，如“周一”，那么后边的选项是“周二到周日”等，这种情况下就不需要将所有的选项都展示出来，可以使用下拉框来简化界面。

  • 交互逻辑

1.选项的设置，在设计单选框的选项时，要充分考虑用户的实际情况，给出的选项要覆盖到所有的情况。应该满足“互斥”的原则，因此选项之间要避免存在交集，同时也要注意选项覆盖要全面，不能出现遗漏。

例如，要考虑到用户不进行选择的情况，这时需要提供一个“无”的选项。给出的选项有可能都不符合用户的情况，如果所有的选项用户都可能不会选，就需要提供一个“其它”选项。

2.默认选项，一般情况下为第一个选项，需要选择最安全，最有可能的选项作为默认选项，提前预判用户的选择，提升用户选择效率。

3.选项排序会影响用户选择效率，所以需要遵循一定的原则。按照逻辑顺序，选择概率由高到低；或者按照复杂程度排序，由简单到复杂；也可以按照操作后风险排序，将最安全的操作放在前边，由风险最低到最高进行排序

4.排列对齐方式，竖直排列相对于水平排列而言，容易读取和定位，可以提高用户的浏览效率，所有的选项进行左对齐，不用受制于选项的标签文字长短，但竖直排列会占用较多的垂直空间；水平排列要注意每个选项之间的间距，间距尽量大一点，要不然用户会分不清单选按钮的文字到底是在前边，pc端水平空间比较大，所以相对而言，水平排列的方式更加常用。

5.交互区域，单选框的面积较小，用户在点击的时候会比较困难。可以通过扩大点击区的交互区域来提高易用性，将标签文字也设置为可点击，增加操作区域的面积，方便用户操作

6.文字标签，每个选项的文字都要简洁明了的表达该选项所代表的含义。一般使用短语而不是句子，因此不需要以句号来结尾。尽量保证每个文字标签用语的表达的一致性，不要出现有的用名词，有的用动词的情况。如果需要解释说明，可以在选项下方使用单独一行文字。如果标签文字无法进行精简，必须使用多行文字，将单选按钮与文字顶对齐

7.交互状态，每个选项都有选中和未选中两种情况，每种情况对应了3种交互状态，分别为默认、悬浮和禁用。


二.多选框

多选框的交互定义是帮助用户完成从若干个互斥的选项集合当中选取一个或者多个选项的任务，多选框多用于表单中。传统意义上，多选框是方形，单选框是圆的，用户已经形成这种习惯认知，所以尽量避免使用特殊形状

  • 使用场景

1.当用户需要在一组互斥的选项中进行多个选择，完成N选n的任务，使用多选框

2.当选项数目在3-7个之间时使用多选框；如果选项超过7个，推荐使用下拉选择

3.当选项数量为一个，包含“是”和“否”的逻辑，也可叫单个多选框 比如常见的用户协议页面，通常采用单个多选框。

  • 交互逻辑

选项排序/对齐方式/交互区域/文字标签等逻辑与单选框基本一致

1.选项的设置，因为所有选项处于外露状态，所以超过7个时建议使用下拉选择器，避免选项过多难以展示

2.默认选项，相对单选框，默认选择在多选框中并不常见

3.提交操作，单个多选场景中，提交时必不可少的，可以是确认按钮或是其他方式；下拉选框中为了提高效率也可不用确认，点击空白处即确认选择。

4.排列对齐方式：纵向排布，适用于选项内容较多或信息长度差异较大的情况；横向，适用于选项数量多且内容简短的情况

5.特殊状态：相对于其他控件，多选有了两个较为特殊的状态“半选中”“禁用(已选)”

1）半选中状态是全选状态的一种特殊状态，依附于全选状态，所以当多选框中存在全选时才可能出现半选状态，同时还需要有选中状态的子项，全选半选状态属于【父级】状态，交互的逻辑是状态的变化是随时体现的，所以【子级】状态的变化，作为【父级】状态也应该随之变化，这样父子级联动才会有半选中状态的出现。

2）禁用状态有未选禁用和已选禁用，未选禁用一般是该条数据不满足条件无法选中进行操作。而已选禁用一般用户的权限不足无法进行操作，通常展示出来只是为了让用户了解到有此操作。 

  • 应用场景

1.复杂选择器

复杂选择器中常常会用到多选框，可以明确展示选项的选择状态，需要注意的是多选框可以承载的半选，全选状态所对应的关系，是否符合业务场景。在实际工作中，我曾遇到过父级选择影响子级但是子级无法影响父级的多选场景，不符合常规的多选习惯，但是在实际业务场景中真实存在。

2.权限设置

在很多权限设置/流程设置的页面中，常常会用到多选框，需要注意的是各个场景中选中，取消，默认，重置等不同状态下，页面的变化，状态扭转时交互逻辑的合理性和易用性。

3.表格多选

表格页面情况多且复杂，对于勾选有两种形式一种是勾选多选框，一种是点击行数据选择，需要明确哪一种更适合当前的业务场景。另外表格的中最多的功能即是全选操作或是部分选择操作，需明确操作后对整个表格的影响 

三.开关

开关用于两种相对对立的状态的切换,多用于「开/关」「启用/停用」等，不同于单选和多选开关是一个即时性的操作，这也导致开关使用的特殊性。开关能明确的展示当前的功能状态，让用户能高效的进行跳转操作。

  • 使用场景

1.用于对流程的快速开启，如表格中开启或关闭某条数据/功能

2.权重较高的功能或设置，如配置表单的停用/启用，用户权限的启用/停用

3.用于开启/关闭全局权限，后设置其他功能的操作，如业务规则的设置等

  • 交互逻辑

1.开关 配有对应的文字说明，开启/关闭某种功能或权限

2.开关具有联动性，通过开关去控制下层功能的操作

3.开关的每一次变更状态都要有相应的反馈，辅助用户进行状态判断


四.下拉选择

下拉选择B端业务中最常用的组件，且下拉选择的类型也比较广，一般有下拉单选，下拉多选，下拉级联，下拉树等基本场景是可选项过多时，会使用下拉选择器对所有选项进行整合方便用户高效录入信息。选项层级建议不超过 三层且需要有一定的逻辑排序，通常包括触发器和下拉面板两个部分当选项数量过多的时候，建议增加「搜索」功能。

  • 下拉选择结构

1.标签文本：选择器标题，明确选择内容

2.选框：与文本框类似，需有一个外边框，为可操作的热区范围，主要功能是与下拉菜单进行联动

当选项较多的时候，多选框会配上搜索功能，目的是为了让用户快速找到对应的选项，而形式主要有以下两种

3.右侧标识(可选)：每个选框右侧的图标，都是选框类型的象征。常见的是下拉箭头，默认朝下；展示选项列表时，箭头朝上。

4.占位符：保持暗提示的简洁，避免把暗提示作为选择器的辅助说明，默认占位文字，格式为「请选择xxx」

5.回显值：回显值通常包括两种类型

1）当下拉单选，一般采用纯文本回显即可

2）当下拉多选，需要同时展示多个选中项，因此在录入框中采取Tag形式，使单个选项也可以点击删除形成完整的闭环

6.选项：下拉选择一般针对选项数超过5个

内容：1）选框 + 文本 + 副文本； 2）选框 + 文本； 3）文本 + 副文本； 4）文本。除了选项内容的不同，形式中也有较为复杂的，重点分析级联选择和树：

1)树展示，可选择的数据是一个树形结构时，例如公司层级、学科系统、分类目录等，树结构中可以自由选择子节点和根结点。

2)级联展示，针对的一般是有所属关系的选项且所属关系比较明确，层级一般3-5级，选择到最末子级才能完成选择一般是由大到小进行选择，选项数量上3>2>1，比如省市县选择

3)分组展示,选项过多时考虑使用的方式，使用分割线将同一类选项进行划分，用户选择时会思考从大的分类到具体的选项。但选项过多则还是建议用树结构

7.选项面板：承载所有可选择的选项列表，在选项数量过多时会对下拉菜单的高度进行限制，即设置下拉菜单的最大高度，当超过最大高度时，出现滚动条。面板相当于一个容器可以根据业务需求承载复杂的形式 例如tab分类、锚点、字母定位等，


  • 选择器状态

默认（Default  

悬停（Hover

1.未选择，若选框有搜索功能则光标变成文本输入状态，若没有搜索功能则光标变成小手（示例

2.已选择，选择后悬停状态下全部清空的功能，不是所有场景下配置该功能， 要考虑实际业务中是否需要清空

激活（Active

1.未选择，点击框体激活下拉面板，单选一般是勾选后自动关闭面板，多选则需要点击面板以外确认关闭面板

2.已选择，若是已选择再次激活，需要将已选择的选项高亮，再次点击已选选项则取消选择；选项热区，一般将整行作为热区扩大点击范围，方便用户操作。

禁用（Disable

1.选框禁用，用户无法激活，选框置灰，在设计工程中需要将禁用于正常状态之间拉开差距，这样用户能快速识别

2.选项禁用，表示该选项无法被选择，不影响整个选择器的功能，只用将该选项置灰即可，光标置入时会变成Not allowed


  • 回显规则

  1. 单选，多数单选选择后下拉面板自动收起，回显选择的选项，选项回显时有一些特殊情况如存在极端情况文案过长则结尾用「…」展示， hover 显示「文字提示气泡」；或者选项中存在主文本副文本，考虑实际业务场景回显时可只显示主文本。

  2. 多选，以Tag形式展示已选择项使单个选项也可以点击删除形成完整的闭环；存在的极端情况是当选项过多时的展示效果，一般有两种形式撑开高度和选项融合

      1）撑开高度，一般用在需要完全展示选择项同时可快速调整已选项的场景中，通过改变录入框的整体高度来展示完整的选型，撑开的高度能在表单中实现一些疏密变化，一般也不会无限撑开，会有一定的限制，并且在右侧增加滚动条。

     2）选项融合，对选项展示不作要求的场景中可根据文本框的宽度进行选项融合，展示具体的选项数量即可，这样能最大程度的保证表单的的整齐，让选择器的适配性更高。

     3）省略展示选项，以文本形式展示，鼠标hover气泡展示全部选项信息

问题思考

何时用下拉选框，何时用弹窗选择？

大部分情况下，单选优先用下拉选框，用户比较高效的完成选择，同时也可以明确自己的选择。而多选场景中对于选项数量可控，选项复杂度较低的可以用下拉选框。但是对于选项结构复杂，内容过载，用户频繁的滚动容易造成误操作影响选择的准确性和高效性，此时会考虑使用弹窗，且多选弹窗一般需要配有搜索区，选项区，已选区。需要注意的是，已选项在弹窗内的显示以及回显形式。多选弹窗一般可以比较直观的展示已选项，所以可以采用省略展示选项的方式。


选择搜索如何显示？

如下弹窗选择中，对于数量和层级比较复杂的选择项，搜索是很有必要的，对于搜索结果的展现形式不同的场景可能会有不同，用户使用搜索一般是对于选项比较明确，所以推荐搜索结果展示末级，用户可以更高效的做出选择，避免复杂的层级关系干扰。


五.时间与日期选择器

  • 两种类型

1.时间点选择，选定某一个时间/日期点，B端时间点选择的业务场景较少

2.时间段选择，选定某一个时间范围，一般有开始时间和结束时间，时间段的应用一般是在数据筛选的场景中

确定时间类型后，要考虑时间粒度，时间粒度分为年、季、月、周、天、时、分、秒，B端图表页面中针对年度、季度、月度的筛选时很常见的，需要结合场景选择时间粒度。

日期选择器中一般是通过点击让用户选择时间，除了让用户点选外，时间选择器还会提供一些快捷选项例如“今天、本周、本月，本季度“等。选择后回显的时间显示格式有多种如“2022-01-01”“2022年01月01日”“2022.01.01”“20220101”“2022年01月01日”平台需要确定统一的样式，避免增加用户的认知成本。

时间段选择，常见两种形式分段式和连体式，在不同的平台都有应用，在交互上的区别分段式需要用户点击两次分别选择开始时间和结束时间，连体式是用户点击一次调起时间选择时间段，相对而言连体式操作更便捷，但是分段式理解更简单，连体式存在一定的认知成本，总体上来说其实区别并不大，平台需要建立统一的标准，这样能形成较为统一的体验和习惯。 


选择器在实际工作中应用广泛，B端业务复杂，总会遇到各种新的场景，总结会有不足不全之处，欢迎大家一起探讨交流。


文章来源：站酷   作者：MuMu鱼

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


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

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

评论(0) 浏览(8215)

UI设计师交互设计｜谈谈产品细节体验

周周

用户体验是用户对产品价值的整体感受，其中包括用户感受到的产品价值以及用户感受到的操作体验。不要让用户思考，这是每个设计师所追求的。这篇文章举了大量的例子，来跟大家一起进行产品细节洞察分析。感兴趣的朋友一起来看看吧。

评论(0) 浏览(1885)

留白设计和UI设计准则

博博

接上一篇文章叙述留白设计准则以及UI设计的排版准则，希望在这个隔离的日子里，大家一起努力克服疫情，加油！






    • 文章来源：站酷   作者：赤鲸

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

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

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


评论(0) 浏览(1551)

UI设计中色彩理论和实用的调色板指南

博博

颜色是感知的问题。每种颜色代表不同的定义波长，但是我们每个人对颜色的感知都取决于我们的感知能力。

颜色是感知的问题。每种颜色代表不同的定义波长，但是我们每个人对颜色的感知都取决于我们的感知能力。此外，我们都有与颜色相关的不同文化或背景关联。

有很多很棒的文章和视频，介绍了色彩理论和色轮，还有许多用于生成调色板的工具。但是有时您会在实践中发现这些文章不太好用，颜色组合不完全匹配或所生成的调色板在您的项目环境中效果不佳。

所以你会怎么做？您如何开始思考和查看颜色，使它们更易于选择以及调整您的需求？

诸如互补和单色，饱和度和亮度之类的色彩理论术语并没有吸引他们。

因此，我开始以不同的方式分解色彩，方法是从绘画和室内设计等传统视觉和图形艺术中汲取灵感，并以对我们作为UI设计师所做的方式有意义的方式对其进行取景。

匹配调色板并平衡配色方案

也许您已经按照所有的色彩协调和颜色理论教程进行了准备，并生成了一个免费的调色板，但是您注意到这些颜色似乎不太匹配，也许它们看起来比较粗糙或不专业。

创建良好的配色方案就是与色调，阴影和温度匹配的平衡。要在设计应用程序中成功做到这一点，您需知道要拉动哪些杠杆。

色彩理论提供了一些公式，可用于启动调色板，这是理解调色板的重要基础。但是创建漂亮的调色板不仅与这些公式有关，还与平衡色调，阴影和温度有关。

这些是我们可以推拉的“杠杆”，可以为我们的UI设计实现更加平衡和独特的颜色组合。

因此，首先，回顾一下这些杠杆的作用。

色相是用于描述所见到的每种色调的通用术语。

饱和度指的是我们正在查看的特定颜色的主要颜色系列。白色，黑色和灰色通常被称为无彩色。

明度也指颜色的明暗程度。色调相同的颜色，明暗可能不同。例如，绛红色和粉红色都含有红色，但前者显暗，后者显亮。

色温-色温更多地是关于我们如何感知所看到的色相。并且我们倾向于将它们分为暖色和冷色。

暖色-通常是通过增加色调中的红色或黄色来获得的颜色。这些往往会唤起激情，舒适，活力和运动的感觉。他们使我们想起阳光和热量。

冷色-是增加蓝色和绿色的颜色。这些趋向于唤起，清新，冬天，静止，平静。他们使我们想起冰，雪和水。

色彩模型和色彩空间

要获得一些技术知识，您可能听说过3种不同的颜色模型，这将有助于我们更好地理解光和颜色的协同作用。

CMYK使用减法混色。它指的是光线反射物理白页的方式。颜色的重叠导致黑色。由于页面无法投射光线并向您发光，因此页面必须具有反射光。将这些颜色混合在一起就可以掩盖页面的白色，从而减少了可以反射的光量。

RGB称为光的加法混合。它指的是数字屏幕向我们投射光的方式。您在全亮度下的颜色会导致我们看到白色的重叠。有点像被明亮的泛光灯所蒙蔽。

HSB-代表色相，饱和度和明度

HSB颜色模型为我们提供了放射状的颜色，其中我们具有一定范围的色相，饱和度和明度值。

这就是我们的眼睛和大脑如何解释颜色HSB就是我们的眼睛所看到的一切，而与它是从屏幕还是在纸上投射的光线无关。

因此，出于为UI设计选择颜色的目的，我们将使用HSB颜色模型。

颜色属性

您经常会听到两种较大的颜色分组。暖色和冷色。

暖色通常被认为是主动色，这意味着它们会引起更多关注。

冷色通常被认为更被动且后退一些。

根据色彩的丰富程度和它们如何平衡，您可以使柔和的暖色充当被动元素，而更鲜艳的冷色则扮演主动角色。

现在，您了解了颜色如何在屏幕上显示以及如何设置我们的设计应用程序。让我们谈谈如何在我们的设计软件中使用和推动这些杠杆，并平衡我们的配色方案和调色板。

为了得出这些不同的颜色类别，我们将集中于推和拉色调，饱和度和亮度（HSB）的控制杆。

在数字屏幕上，我发现有一个公式和安全范围的饱和度和亮度，可以每次为每个类别创建一个完美的调色板。

为简化起见，我将主要颜色分为6种通常可以识别的主要颜色类别。这些反映了我们在日常生活中谈论颜色时通常倾向于指代颜色的方式：

1.宝石色调

S：83-73，B：76-56

这些颜色是饱和度很高的色调，以宝石命名，包括宝石蓝，宝石红，紫水晶紫色，柠檬黄和翠绿色。想一想红色宝石项链或皇家紫色的魅力。这些颜色富丽堂皇，深沉，并赋予豪华感。

2.粉彩

S：14-21，B：89-96

柔和的颜色属于浅色系。粉色，淡紫色和淡蓝色是常用的柔和色。这个家庭的颜色通常被描述为“舒缓”。我们通过降低饱和度和调整色彩来创建这些颜色。

3.大地色调

S：36-41，B：77-36

这些是自然界中常见的颜色。可以通过将纯色与白色，黑色或灰色相结合来创建它们。从广义上讲，这些是中性色。它们受到树木，森林，海洋和天空的色调的影响，被用以模仿自然色彩。我们通过增加饱和度和调整色调来创建大地色调。

4.中立

S：1-10，B：99-70

纯中性色包括黑色，白色，米色和所有灰色，而接近中性色则包括棕色，棕褐色和深色。这些是通过使色彩去饱和来创建的。它们可以与以上任何类别配对以创造平衡。我们通过降低饱和度并调整色调，色调和阴影来创建中性色。

5.荧光灯/霓虹灯

S：100-63，B：100-82

在物理世界中，这是由霓虹灯管或紫外线反应涂料的颜色创造的，但在数字世界中，我们可以通过将非常明亮和高度饱和的颜色应用于我们的设计来获得相同的效果。我们通过增加亮度和色调来创建它们。

6.阴影

S：0-0，B：0-100

两种主要的阴影是黑色和白色，其他阴影也包括不同程度的灰色。

UI颜色组合

最佳的用户界面设计结合使用一种颜色类别以及中性和阴影。

您实际上只需要这些类别中的1或2种颜色即可设计参与整个用户界面。

我们为什么不这样谈论颜色

作为数字设计师，我们倾向于避免给这些配色方案分类，因为术语似乎是为混合自然色彩的画家，印刷设计师和室内设计师保留的。但是从实际的角度来看，当我们仍在学习色彩理论并使我们的眼睛习惯于选择可以一起使用的色彩时，我发现以这种方式引用色彩在UI和数字屏幕设计中可以非常有用。

这不是一门精确的科学，但是您会看到如何以这种方式思考颜色并掌握一些杠杆和数字，以指导您帮助用户创建更令人愉悦和精致的调色板。

理解色彩理论的基础和原理很重要，特别是当涉及到实际应用时，它就显得尤为重要。引用不同的学科并找到对我们有用的类比可以带来很大的不同。

作为UI / UX设计师，最重要的是，无论您如何去实现，您都能够有效地使用颜色来传达信息并为用户创造最佳体验。


    • 文章来源：站酷   作者：对啊设计君

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

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

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


评论(0) 浏览(3774)

UI 设计：如何做到理性？

博博

有哪些理性，以及如何做到理性



UI 设计，是用理性方法，来满足需求，并带来美学享受。


本篇探讨 UI 设计如何做到理性。全文共有三部分：有哪些理性，如何做到理性，止步于理性吗。



01 UI 设计：有哪些理性？


UI 设计主要有四类理性：基本原则，基础知识，风格设定，风格把控。四类理性有一个共同核心：活学活用。



1 基本原则


共有四个基本原则：对齐，对比，亲密，重复。



先说对齐。


秩序产生美。对齐作为一种基本秩序，主要事关整齐美观和阅读体验。


对齐一般分左对齐、右对齐和居中对齐。


从阅读体验角度来讲，左对齐通常胜过居中对齐，所以绝大部分文章和 UI 界面都是左对齐为主。


从美感角度来讲，居中对齐往往胜过左对齐，所以一些强调美感胜过强调阅读效率、篇幅不长、同时需要细品的诗或歌往往采用居中对齐。



从空间利用率角度来讲，右对齐往往是左对齐的一种补充。比如微信的发现页面，最重要的图标和文字左对齐，次要的右箭头和其它信息右对齐。


UI 设计追求阅读体验、美感和高空间利用率，所以这三种对齐方式大部分时候都会同时出现。整体而言，是以左对齐为主，居中对齐和右对齐为辅。


再说对比。


嘈嘈切切错杂弹，大珠小珠落玉盘。音乐讲究韵律和节奏，设计也追求错落有致的节奏感。这种节奏感，很大程度上靠对比实现。


好的对比可以带来视觉张力，就是抓人眼球的吸引力，同时也能起到主次分明和视觉引导的作用，最终带来良好的阅读体验。


一定程度上，对比是无处不在的。只要存在不同，就存在对比。比如大小之间的对比，不同颜色之间的对比，文字与图标/图片之间的对比，不同对齐方式之间的对比，等等。


一般而言，对比需要果断：若不同，就彻底不同。因为一般情况下，充分的对比能带来更好的视觉张力和更好的阅读体验。


第三说亲密。


设计就是分类，张小龙曾如是说。分类中最重要的原则是亲密，还有一个副产物是留白。


性质相同或相似的元素，我们会让它们看起来离的更近，关系更亲密。亲密成就分类，分类能化繁为简。


最后说下重复。


设计追求一致性，一致性主要靠重复来实现。被大量“重复”的元素，比如这篇文章里的字体大小和字体颜色，既保证了一致性，又提高了效率。


2 基础知识


基础知识主要包括：手绘、颜色、版式设计、字体设计、品牌设计、动效设计、插画设计等专业知识。


UI 设计师可能不用画卡通人物或插画，但一定会画图标和 logo，这些也会用到手绘。作为造型基本功，需要掌握一定手绘技能。


颜色方面，最重要的是能够很好感受和理解颜色传达出来的感觉，也即颜色的“精神之美”，这块主要依赖审美和练习。


配色方面，推荐软件里的 HSB（色相、饱和度和亮度） 模式，这种模式很好理解，也方便调色。另外还强烈推荐从照片中吸取颜色，因为照片往往会和“生活”、“自然”有一定关联，“生活”和“自然”是非常重要的素材和灵感来源。从色卡中选择颜色也是一个不错的选择。


版式设计就像是选秀节目中练习生的舞台表演，考验的是唱跳、表情管理、舞台魅力、临场应变等综合实力。


“活学活用”环节，会结合例子分享版式设计。


字体设计、品牌设计、动效设计、插画设计等方面，个人经验不多，就不分享了。文末会附一份推荐书单，囊括基本原则和部分基础知识。


3 风格设定


风格设定，即上篇提到的“精确描述”，是在动手设计之前，先探索出合适的风格，并把它精确描述出来。


好的开始是成功的一半。风格设定是一个开始，极其重要。如果风格设定只做到 60 分，稍微打点折扣的执行结果就是不及格。所以，如果要把设计做到 85 分，风格设定一般要做到 90 分。


风格设定犹如在茫茫大海中行船，首要目标是把握方向，核心诉求是精准。海上并无现成道路和导航可循，只能依靠繁琐而严谨的推理和计算。


风格设定的次要目标是划一个既清晰界定风格、又清晰指明“发挥范围”的“圆圈”，核心诉求是周密。因为需要清楚知道“圆圈”以内代表什么，“圆圈”以外代表什么。


在“精准”和“周密”上同时做到优良，风格设定才能做到优良。


既精准又周密的风格设定，通常无法一蹴而就：“风格设定”阶段一般只能做到七成，剩下三成需要在设计过程中继续探索和打磨。下一大段会结合案例分享具体方法。


4 风格把控


风格把控有两层含义，一是实现当初设定的风格，二是在实现的基础上做到统一和规范。


只要严格在“圆圈”里发挥，实现当初设定的风格并不难。那做到统一和规范难吗？往难了说就是需要做大量琐碎工作：以联系的眼光看待所有设计元素，并把它们分类规整好，注意分类不宜过多，同时分类逻辑上不能出现明显问题。往简单了说就是大量复用已有的设计样式。


风格把控就是在划定的“发挥范围”内，利用设计知识和经验，以规范的方式实现规划好的风格。


5 活学活用


活学活用作为四类理性的共同核心，最典型的应用场景是版式设计。


活学活用有两个要点：正反结合，风格第一。



所谓正反结合，是指设计知识既能正着用，也能反着用。最常见的例子是对齐原则，大部分时候是正着用，但如果想要营造活泼的感觉，也会反着用：故意打破对齐原则。


除了对齐原则，其它设计知识，比如重复原则，也可以反着用。


本文配图就是一个例子：图片左上角、右上角和右下角分别散布着装饰元素（横线、圆环）和 logo，在装饰元素的出现次数上，没有用重复原则。过年家里挂灯笼一般至少挂两个，同一装饰元素一般至少出现两次，以达到一种和谐和较为热闹的装饰效果。



我在装饰元素的出现次数上没有用重复原则，而在出现位置（相似位置）、元素大小（相似大小）和元素颜色（相似颜色）上用了重复原则，同样达到了和谐效果。之所以没在装饰元素的出现次数上用重复原则，是想放一个隐喻在这里。


所谓风格第一，是指设计风格永远第一，设计知识永远第二。知识服务风格，切不可重知识轻风格。


《倚天屠龙记》中，张三丰教张无忌练习太极剑时，要他忘记剑招，只记剑意。某种程度上，版式设计也要将“剑意”放在第一位，“剑招”服务“剑意”。


对比原则也有反着用的时候。有一条关于对比的知识：对比要果断，若不同，就彻底不同。这条知识能解释百事可乐 logo 里红色与蓝色的强烈对比，但解释不了山本耀司旗下大部分服装那千篇一律的黑色——单色，无对比。



设计最重要的是感染力，感染力主要来自个性、态度、价值观这些风格层面的东西，而非设计知识这些技法层面的东西。


当一个设计，技法高超而风格不足时，感染力和魅力就会不足，这也是设计师经常会犯的错误，大家需要注意。



02 UI 设计：如何做到理性？


可以简单分成三步：规划，成形，细化。下面结合微信 Redesign 这个案例来说明。



1 规划：用“红绿灯”法设定风格


设定风格，用到的方法姑且称之为“红绿灯”法。“红绿灯”法借鉴并改良了我在网上看到的一种“红黄绿卡片法”（在红、黄、绿三种颜色的卡片上写下不同的设计关键词），并和“情绪板”法有相似之处：都包含关键词定位和图片参考两部分。


先说关键词定位，共有两步。


第一步类似头脑风暴，结合产品属性、用户属性、市场情况、个人喜好等因素，把能想到的设计关键词全部写下来。合适的不合适的都要写，只要想到了就写下来，确保有二三十个。如果关键词数量不够，这个步骤可以多重复几次，直到够了为止。这一步设计师和需求方都要参与进来，在提供关键词上双方是平等关系。


这个微信 Redesign 是个具有探索性质的小练习项目，基于微信 7.0，有两个目的：首先保留原有交互体验和品牌识别度，其次在视觉上更年轻、更流行。可以通俗理解成：一款微信“皮肤”，主要给年轻用户和赶新潮的中老年用户用。


结合产品属性（社交类、工具类、内容类）、用户属性（年轻用户为主）、市场情况、个人喜好这些因素，这一步想到的关键词如下图所示。



第二步是归类，就是把第一步产生的所有关键词归成“红黄绿”三类。如果关键词不够，还可以再补充。这一步依然是需求方和设计师共同参与，但需要设计师来主导。


红色关键词代表不能踩的红线：不能这样做；黄色关键词代表黄灯警告：这样做不太合适；绿色关键词代表畅通无阻：应该这样做。


需要注意的是，绿色关键词最好控制在 3-4 个之间，如果超过 4 个，就需要分成主绿关键词和次绿关键词，主绿关键词依然要控制在 3-4 个之间。这样做有两个考量，一是确保简单和重点突出，二是也更容易实现。


回到第一步的关键词上来。设计中当然可以用“拟人”、“隐喻”等手法，所以“拟人”这个关键词显得意义不大，故删去。“温润”和“亲和”，“老少皆宜”和“大众”在语义上都存在一定的重复，所以删去后者。删除这类不合适的关键词后，剩余关键词就按“红绿灯”法归类，归类后情况如下。


（微信 Redesign 之按“红绿灯”法归类后的设计关键词）


关键词定位已就绪，再来找参考图片。


可供参考的图片有两大类：照片和 UI 界面。UI 界面也有两类：线上作品（真实项目、练习作品等）和上线作品。


做 UI 设计，参考什么样的图片？个人建议，做什么类型的设计，就重点参考什么类型的图片。比如 UI 界面就重点参考 UI 界面，banner 就重点参考 banner。


UI 界面的设计，个人喜欢重点参考知名产品的上线作品。单从视觉角度来说，上线作品的质量可能比不过一些线上练习作品。但是已经上线的知名产品的 UI 设计，其风格的形成往往都会经过很多推敲，会有很多比较成熟的设计思路在里面。


参考别人的设计，最重要的是参考设计思路，其次才是参考表现形式。这种设计思路，有时候能从网上找到，但更多时候靠自己推测。


微信 Redesign，根据“很多年轻人在用，且风格比较流行”这条主线，找来了 QQ、抖音、B 站、小红书、陌陌、Soul、腾讯视频、爱奇艺等产品的截图。这些产品的截图，看完一圈后，就会面临一个问题：以图标为例，这几个产品的图标，风格各异，但基本都具备“年轻”和“流行”的特点，那应该参考哪一个？



这时就要求助关键词定位。除了“年轻”和“流行”，主绿关键词还有一个“轻微老少皆宜”。最符合“轻微老少皆宜”的是爱奇艺和腾讯视频：很多老人和小孩也会用这两个 App 看视频，网上公开的数据也能佐证这一点，所以它们的设计一定会照顾中老年用户的审美。


最后，出于个人偏好，我选择重点参考爱奇艺的图标风格，具体而言就是：深浅双色、较粗(1.5pt)描边、圆润风格。


2 成形：按照规划，实现风格


红黄绿三色关键词及重点参考图片就绪后，就可以动手设计。


我一般会把界面设计粗略分成三大部分：版式风格、元素风格、元素大小，元素为图标、图片、按钮等，然后去一一实现。


先说版式风格。


用的主要绿色关键词是“更流行”和“更年轻”。“更流行”包括：更大字号的页面标题、尽可能用留白代替分割线和卡片的“无界”风格、圆形头像、更多留白更多舒适、等等。“更年轻”包括：更圆润的搜索框、输入框和图标、更年轻更具活力的配色、等等。


再说元素风格之图标风格。


图标主要参考爱奇艺 App：其一，底部导航和发现页的图标都是深浅双色加较粗的描边；其二，除了更圆润以外，部分图标还变 Q 了。


最后说元素大小。


以这个小项目为例，最主要的元素大小是图标大小和字体大小，它们会影响整个设计的感觉。通常情况，元素越小，给人感觉越精致、越高端，此其一；其二，可能是年轻人和老年人视力存在差别的原因，越小的元素往往代表年轻人的审美，反之则代表老年人的审美。


元素大小主要运用的绿色关键词是“轻微老少皆宜”。也就是说，需要在年轻人和中老年人的审美中找到一个平衡，所以元素大小基本直接参考了微信 7.0 的设计，个别地方做了微调。


最后，出来的效果如下图所示。



3 细化：打磨优化


这份设计我发在了网上，部分网友留言说看着不够好，不太舒服，有一个表达的比较具体——“虽然用了大面积留白，却让人感到紧迫...”。


基于网友的留言，我仔细审视了这个设计，最后发现问题主要出在页面（发现页为例）左右两侧：留白过小。



当初之所以这么设计，是想通过页面左右两侧较少的留白制造一种内容将要撑破屏幕的感觉，从而营造一种活泼的感觉。注意，彼时“活泼”还没出现在“黄色”关键词里，上文两张关于关键词的图都省略了中间探索和优化的过程。


很多网友之所以没有感受到活泼而只是觉得不太舒服，至少有两个原因：第一，整个设计的基调是简约、清爽，有一定的年轻感和流行感，但没有太明显的活泼感，硬往里面某个地方塞“活泼感”并不和谐，大家也难以感受到；第二，单纯就“活泼感”而言，做的依然不到位，比如图标与右侧文字的留白，可以比图标与左侧边界的留白大，方能更好彰显活泼与活力。


考虑到“轻微老少皆宜”这个绿色关键词及微信主要是工具型和内容型产品，“活泼感”用在这里并不十分合适，于是放弃，并将“活泼”归为“黄色”关键词。此处留白的目的就回归其本职工作：整体和谐与舒服。于是就把留白相应调大了。



另外一个优化的点是“眼睛”的形状：微信图标、看一看图标、表情图标、朋友圈里将点赞和评论折叠起来的图标都有一双“眼睛”，这双“眼睛”起初是竖着的椭圆形，很萌，也比较低龄化。为了尽可能的“轻微老少皆宜”，这里统一把“眼睛”由竖着的椭圆形改成了圆形，弱化了“萌”和“低龄化”的感觉。



还有一块是颜色上，拍摄视频动态的图标有用到蓝紫色。这个紫色基本符合“更年轻”、“更流行”，但不太符合“轻微老少皆宜”，所以最后放弃了紫色，保留了蓝色。



遵循主绿关键词里的“轻微老少皆宜”，其它优化的点有：微信图标尖角处的圆角调小，删除启动页与黑色"WeChat"字形成对比的绿色圆点。另外还有一些视觉层面美观、和谐、舒适度的优化，比如颜色、留白、圆角大小、字体大小方面的微调。


优化后的微信 Redesign，整体效果如下图所示。



凡事预则立，不预则废。UI 设计如何做到理性，最核心的是设计风格，规划、成形和细化都紧密围绕设计风格展开。


最后，尝试总结下“红绿灯”法的优势，主要有四点：精确、周密、稳妥、高效。



关于设计风格，传统规划方法一般只有三四个“绿色”关键词。


“红绿灯”法拥有“红灯”、“黄灯”和“绿灯”三种颜色的关键词，从而确保大方向更准确。“红绿灯”法会产生20个以上的红黄绿关键词，从而确保划出来的“发挥范围”更周密，极少有疏漏。


在“成形”这个设计环节，一旦踩到“红线”和“黄线”，规划好的红黄绿关键词都会马上发出警报，从而大大降低“违规踩线”行为的发生次数，确保设计执行环节的稳当可靠。


“红绿灯”法通俗易懂门槛低，需求方可以较为深度参与“规划”环节。需求方在“规划”环节的深度参与，理论上可以降低后期的返工和修改次数，从而确保整个设计过程的高效。同时理论上也能够提高设计师和需求方双方合作的愉快程度。



03 UI 设计：止步于理性吗？


UI 设计，始于理性，但无法止步于理性，还需要超越理性。注意，这里的理性，仅指设计知识的相关理性。


超越理性主要有两点：直觉，其它知识。



1 直觉


直觉是指一种能够快速感受和评估设计优劣的感觉。良好的直觉往往快而准。


感知和评价别人的设计时，用到的几乎全部是直觉。审视自己的设计时，也离不开直觉。


在审视自己的 UI 设计时，直觉主要发挥两个作用：第一，囿于知识储备或表达能力，有些地方就是解释不清，这个时候就要靠直觉去感受去判断；第二，直觉往往会作为检视设计的最后一道关卡，也是最重要的一道关卡。


直觉来自哪里？


个人观察是，直觉往往和审美正相关。比如一个设计师，他掌握的设计知识有限，经验有限，对自我的要求也不高，最终的作品往往不出彩。但如果他审美好的话，往往能够分辨出不同设计方案之间孰优孰劣。


如果你想就设计稿征求别人的意见，请去找那些审美好的人。


2 其它知识


其它知识是指设计知识以外的所有其它知识。比如 iPhone 上删除应用前应用图标的抖动，其灵感应该来自生活中的摇头求饶或吓得发抖，抖动的幅度和频率则需要利用物理学和数学方面的知识。


优秀的设计，一定会从生活中汲取大量灵感，并广泛利用社会类、人文类和理工类学科的知识。就拿数学来说，在好的设计中，一定是个常客：因为你需要不停的按计算器，从而计算不同设计元素之间的比例关系和各自的大小。


汝欲学诗，功夫在诗外。遣词造句这些文字技巧只能是写诗的基础，而非关键。写诗的关键在于你对生活、对世事的积累和感悟，在于你的思想是否深刻，情怀是否充足。


写诗如此，做设计亦如此。设计知识只是做设计的基础，而非关键。做设计的关键在于“其它知识”。“其它知识”非本文重点，就不展开了。



结语


UI 设计里的理性，主要是各类设计知识。理性的核心在于活学活用各类设计知识。


理性严谨的做 UI 设计，可以简单分成三步：规划，成形，细化。好的开始是成功的一半，一个高质量的规划显得尤为必要。


用“红绿灯”法做规划，并指导成形和细化工作，会更精准、周密、稳妥和高效。


UI 设计，是七分理性，三分直觉。审美越好，直觉越准。


优秀的 UI 设计，一定会从生活中汲取大量灵感，并广泛利用设计以外学科的知识。







推荐书单  


[美]Robin Williams《写给大家看的设计书》

[日]佐佐木刚士《版式设计原理》

[日]伊达千代《色彩设计的原理》

[日]小林章《西文字体1、2》

左佐《设计师的自我修养》

左佐《治字百方》




原文链接：https://mp.weixin.qq.com/s/yZVBzTYJxWQ7fk-tjXG8Yg


    • 文章来源：站酷   作者：SnowDesign

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

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

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



评论(0) 浏览(1762)

12个PC网页的UI设计趋势（上）

博博

实际上所有的网页设计趋势都是由：大型化（Big UI）、较低的密度（Low Density）、长页面（Long Page）这三个设计思想所衍生出来的。而影响这些设计趋势的人，不是设计师，不是硬件制造商，而是用户的行为。


   因为智能手机的普及，用PC浏览的网站关注度正在下降。但是，托B2B数字营销的福。PC网站今后也变成战略中心。即使在B2C的领域，PC网站也是不可或缺。


   对于在硬件方面没有太大变化PC的网页设计来说，也有技术被固定化的印象，实际上现在也正在接受时代的潮流而发生着变化。特别是下面那样的环境变化，也给与PC网站的UI设计带来很大的影响。


•显示设备的多用化。

•智能手机应用的普及化

•电子设备触摸屏的普及


   如果迎合趋势将会取得成功不是吗？这个基础就是抓住用户动向的变化，有必要完全理解这一变化。因此这篇文章是PC网页 UI设计的最新动向，基于那些背景下的推测汇总。



1.Big UI / low Density / Long Page的潮流

   举例说曾经的PC网站有很多是在有限的空间内填入了大量元素的设计。但是现在UI部件变得有：大型化（Big UI）、较低的密度（Low Density）、长页面（Long Page）的倾向。



   以前是海外以创意型，初创型为中心网站所采用的设计，进入日本的海外企业和前卫的网页设计师，采用那些理念设计的企业网站，渐渐地在日本也被广泛应用，这个趋势也与扁平化设计相呼应。2013年以后以Big UI / Low Density / Long Page 为基础的设计理念在网站更新中使用增多了。



   这样的趋势，不能单单看起来时兴，其有合理的存在理由。在开发的立场，让响应式网站更容易实现。如果在用户的立场来看，更容易浏览、更容易理解、不再迷茫，除了所说的这些以外，让网站更好的利用触摸屏，作为其更大的优点。


   近些年不只手写板，笔记本电脑也安装了触屏。对于在没有准备手机网站的情况，在智能手机上，网站的页面也被要求需要有一定程度的浏览。


   触摸屏，因为用手指的点击，不能进行精准操作。因此用户界面会变大。元素之间的必需留出充分的空间。如果用户界面变大，密度变低，当然页面中表现元素要少，页面变长，以滚动为前提了。


   这篇文章之后要介绍很多趋势，都是从Big UI / Low Density / Long Page的潮流中派生出来的。这不是最时尚的流行，但是现在是最适合用户行为的设计思想。



2.1栏布局

   作为Big UI / Low Density / Long Page合适的布局，就是1栏布局。


   曾经左右两栏布局的PC网站是UI设计主流。在电子商务网站等有大量信息的网站中，3栏布局也很常见。但是现在去掉左右栏，只焦点于内容部分，1栏布局正在增加。



   对于用户，不再有不必要的杂音映入眼帘，集中真正必要的内容。文字更容易阅读，图片被展示的更大。


   另一方面，映入眼帘的信息量减少，广告等会变得有些分散。因此，对于用户活动线路的设计，必须要更加谨慎。


   另外，在侧边栏设置局部的导航条手法，与其他层级的网站相关，有让用户不再迷茫的突出优点。去掉侧边栏的导航条，让网站的层级降低，尽可能减少菜单，不止限于1页内的布局意味着网站全体的设计方法需要重新考虑。


   反过来说，多层级化的前提是与网站的庞大度有关。有很多的1栏布局不能让内容被准确的理解，据此判断需要谨慎使用。




3.中对齐

   1栏布局的一个问题是文字换行吧。文字充满整个宽度时候会显的很长，很难保持布局的美观。如果1行的文字数量超过40个字，人们就会觉得难以阅读。不能因为是1栏就什么也都不考虑，宽度被文字占满，是不可避免的。


   解决这个问题的一个思路就是中间对齐。说到宽度很宽1栏的布局，中对齐和左对齐如何很好的组合，变成设计的要点。



   中对齐的正确使用有一些值得注意的点。首先，必须避免用户的视线忽视中间。例如，如果长文本中对齐，文章的开始点就会因此改变，变得难以阅读。如果使用中对齐，短文章不必要换行，长文章必须左对齐。


   还有，接近元素宽度充满的时候，虽然用中对齐，也不能很好的解决。但是,宽度被占满的情况是不存在的，看到中对齐不完整的位置就像悬浮一样。为此，必须要在运用盒子和边缘等下功夫，中对齐才不会出现违和感。





4.固定的顶部和顶部的超薄化

   固定的顶部也很普遍。在很多的时候，这里搭载的是导航条。无论能进入页面内哪个位置，都能立即回到主要部分。固定顶部的UI没有侧边导航，当页面较长时，能确保使用的敏捷度。



   但是，固定的顶部没必要的时候，会有占据一些空间的缺点。因此，顶部只能加工的变薄。像曾经PC网站的外观那样，采用多段式并且较厚的顶部是很困难的。


   这就意味着必须在页面内限定元素。如果元素容纳的多，页面就会变厚，很难被固定化。菜单的数量应该被限定，相对于以前，这方面的意识必须要加强。



5.固定的左边导航

   近年可以看到一些布局将导航条设置在左侧。说起来也与曾经2栏布局为主流时代的左导航在构造和功能上有所不同。


   画面左边被固定，最近有很多追随滑动的按钮。另外，内容部分基本使用1栏布局，跟随画面宽度的进行伸缩的液态布局被使用的数量也很多。



   这样的设计会带来应用程序的操作感。另外，有容易应对多设备的特点。移动端优先的设计，响应式网站和液态布局即是使用PC也能对应多种情况，有采用这样的构造的倾向。


   但是，必须注意的是这样新式布局，对于一般的用户有很难留下第一印象的危险性。另外，对于菜单的多层级化的时候，连接和鼠标经过引出下一级菜单的操作是必要的，因此提高了操作的难易度。


从使用能力，全部的构造等固定左导航的缺点来看，有必要搞清导入的妥当性。



6.液态布局

   在设备多样化中，画面的分辨率呈现前所未有的变化。以前，宽度符合960~980px就可以解决问题的这个规律变得难以通用。对于分辨率多用化的一个回答就是，符合画面宽度的布局也就是液态布局。


   液态布局是，元素和图片不是用像素而是使用%。因此，无论看到什么样的尺寸，分辨率的画面，都会被布局成有一定的平衡。可以解决符合小画面的时候的缺点和符合大画面的时候的缺点。



   必须留意的是，对各个页面“最合适化”的布局是不存在的。设想一下各种各样的分辨率的画面，汇集了最少破绽并被认为是有共同的妥协点的布局手法。有些特定的尺寸会感到平衡被打破，有些程度是必须被允许的，意味着会布局成像网页的网页。


   未完待续...




出典：http://baigie.me/sogitani/2015/02/pc-site-trend-2015/

翻译：SISENdesign



原文链接：http://baigie.me/sogitani/2015/02/pc-site-trend-2015/

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

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

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

大屏数据可视化设计指南

seo达人



 

一、基础概念

1、什么是数据可视化

把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化，数据可视化是为了更形象地表达数据内在的信息和规律，促进数据信息的传播和应用。

在当前新技术支持下，数据可视化除了“可视”，还可有可交流、可互动的特点。数据可视化的本质是数据空间到图形空间的映射，是抽象数据的具象表达。

数据可视化作品《launchit》  作者：Shane Mielke

作者写了本书，地图上显示了世界各地读者的分布情况及对应人数

 

数据可视化作品《world-drawn-by-travelers》 作者：TripHappy

国家之间相互连通的旅游路线，颜色越相近的国家，表明两国家的人们互动越频繁

 

 

2、什么是大屏数据可视化

大屏数据可视化是以大屏为主要展示载体的数据可视化设计。

“大面积、炫酷动效、丰富色彩”，大屏易在观感上给人留下震撼印象，便于营造某些独特氛围、打造仪式感。电商双11类大屏利用此特点打造了热烈、狂欢的节日氛围，原本看不见的数据可视化后，便能调动人的情绪、引发人的共鸣，传递企业文化和价值。

利用面积大、可展示信息多的特点，通过关键信息大屏共享的方式可方便团队讨论、决策，故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。

数据分析类  图片来源：必应；图片作者：帆软软件有限公司

 

二、大屏数据可视化设计原则：设计服务需求、先总览后细节

  • 设计服务需求

大屏设计要避免为了展示而展示，排版布局、图表选用等应服务于业务，所以大屏设计是在充分了解业务需求的基础上进行的。那什么是业务需求呢？业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标，是大屏数据可视化的价值所在。

  • 先总览后细节

大屏因为大，承载数据多，为了避免观者迷失，大屏信息呈现要有焦点、有主次。可以通过对比，先把核心数据抛给用户，待用户理解大屏主要内容与展示逻辑后，再逐级浏览二三级内容。部分细节数据可暂时隐藏，用户需要时可通过鼠标点击等交互方式唤起。

 

三、大屏可视化设计流程

规范的流程是好结果的保证。找到一个可参考的流程，然后步步为营，就能避免很多不必要的返工，保证设计质量和项目进度。

1、根据业务场景抽取关键指标

关键指标是一些概括性词语，是对一组或者一系列数据的统称。一般情况下，一个指标在大屏上独占一块区域，所以通过关键指标定义，我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。以共享单车电子围栏监控系统为例，这里的关键指标有：企业停车时长、企业违停量、热点违停区域、车辆入栏率等。

确定关键指标后，根据业务需求拟定各个指标展示的优先级（主、次、辅）。

 

2、确立指标分析维度

“横看成岭侧成峰”。同一个指标的数据，从不同维度分析就有不同结果。很多小伙伴做完可视化设计，发现可视化图形并没有准确表达自己的意图，也没能向观者传达出应有的信息，可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。

上图向大家展示了数据分析常用的4个维度，我们在选定指标后，就需要跟项目组其他小伙伴讨论：我们的各个指标主要想给大家展示什么，更进一步的讲，是我们想通过可视化表达什么样的规律和信息。而上图，可以引导我们从“联系、分布、比较、构成”四个维度更有逻辑的思考这个问题。

  • 联系：数据之间的相关性
  • 分布：指标里的数据主要集中在什么范围、表现出怎样的规律
  • 比较：数据之间存在何种差异、差异主要体现在哪些方面
  • 构成：指标里的数据都由哪几部分组成、每部分占比如何

 

3、选定可视化图表类型

当确定好分析维度后，事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。

选定图表注意事项：易理解、可实现；

 

易理解

可视化设计要考虑大屏最终用户，可视化结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形。

 

可实现

  1. 我们需要了解现有数据的信息、规模、特征、联系等，然后评估数据是否能够支撑相应的可视化表现
  2. 我们设计的图形图表，要开发能够实现。实际工作中，一些可视化效果开发用代码写很容易实现，效果也不错，但这些效果设计师用Ps/Ai/Ae这些工具模拟时会发现比较困难；同样的，某些效果设计师用设计工具可以轻易实现，但开发要用代码落地却非常困难，所以大屏设计中跟开发常沟通非常重要，我们需要明确哪些地方设计师可以尽情发挥，哪些地方需要谨慎设计！一个项目总有周期与预算限制，不会无限期的修改迭代，所以设计师在这里需要抓住重点，有取舍，不钻牛角尖、死磕不放。

 

4、了解物理大屏，确定设计稿尺寸

多数情况下设计稿分辨率即被投大屏的信号源电脑屏幕的分辨率。有多个信号源时，就会有多个设计稿，此时每个设计稿的尺寸即对应信号源电脑屏幕的分辨率

一般情况下设计稿的分辨率就是电脑的分辨率，当有多个信号源时，有时会通过显卡自定义电脑屏幕分辨率，从而使电脑显示分辨率不等于其物理分辨率，此时，对应设计稿的分辨率也就变成了设置后的分辨率；此外，当被投电脑分辨率长宽比与大屏物理长宽比不一致时（单信号源），也会对被投电脑屏幕分辨率做自定义调整，这种情况设计稿分辨率也会发生变化。所以设计开始前了解物理大屏长宽比很重要。

 

5、页面布局、划分

尺寸确立后，接下来要对设计稿进行布局和页面的划分。这里的划分，主要根据我们之前定好的业务指标进行，核心业务指标安排在中间位置、占较大面积；其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近，把图表类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。

 

6、定义设计风格

很多小伙伴也许没接触过大屏设计工作，但大多数人都应该有APP或者Web风格定义的经验。我们在定义一款APP或者Web页面设计风格时常用的方法是什么呢？情绪版！

大屏虽酷炫，但实际上也是运行在浏览器里的Web页面，所以大屏设计风格定义方法也同样可以是用情绪版来做，这种方法也是目前比较科学高效的风格定义手段

上图提供了情绪版应用的脑图，具体操作细节不做介绍，不太了解的小伙伴可以自己找找资料哈。情绪版的一套流程下来，我们定义的风格基本是科学准确的，可以指导我们执行设计。如果是给甲方爸爸做大屏，这个流程也可以让我们提出的方案更有说服力

 

7、可视化设计

根据定义好的设计风格与选定的图表类型进行合理的可视化设计。目前来讲大屏可视化主要有指标类信息点和地理类信息点两大可视化数据。指标类信息点可视化效果相对简单易实现，而地理类信息点一般可视化效果酷炫，但是开发相对困难，需要设计师跟开发多沟通的。地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点，所以对于被投电脑、大屏拼接器等硬件设备的性能会有要求，硬件配置不够的情况下可能出现卡顿甚至崩溃的情况，所以这点也是需要提前沟通评估的。

 

8、样图沟通确认

这里的沟通分三个层面：设计师对内沟通、设计师对外沟通、设计师与大屏的“沟通”。

样图沟通环节，最初的样图不需要十分精致，我们可以把它理解为一个“低保真”原型，然后通过不断沟通修改，让它逐步完善精致起来，也就是小步快跑，避免那种一下子走到终点，然后又大修大改的情况。

因为我们在前几步已经分别确定了页面布局、图表类型、页面风格特点，所以这一步我们需要用尽可能简单的方法 ，把之前几步的成果在页面上快速体现出来，然后根据样图效果尝试确定五方面内容：

  1. 之前确立的布局在放入设计内容后是否依然合适
  2. 确立的图表类型带入数据后是否仍然客观准确
  3. 根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受
  4. 已有的样式、数据内容、动效等在开发实现方面是否存在问题
  5. 大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象

跟大屏“沟通”是比较重要也是个特殊的环节，这也是我觉得大屏设计跟其它设计不一样的地方，大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境，这里的很多问题只有设计稿投到大屏上才能够被发现，所以这一步在样图沟通确认环节非常重要，有时候需要开发出demo，反复测试多次。

 

9、页面定稿、开发

事实上页面开发阶段并不是到了这一步才进行，这里说的页面开发仅指前端样式的实现，实际上后台数据准备工作在定义好分析指标后就已经开始进行了，而我们当前的工作是把数据接入到前端，然后用设计的样式呈现出来。

切图与标注

由于大屏实际就是一个web页面，所以开发阶段的切图与标注是少不了的。

切图：哪些元素需要切图，怎么切？

一般开发用代码写不出的样式或动效，都需要设计师切图作支持：比如数据容器的边框、小的动效、页面整体大背景、部分图标等。切图按正常网页设计标准切就可以了。

标注

Web页面用什么插件做标注这个大家都很熟悉，我就不多说了。需要注意的是，如果大屏页面需要在不同比例的终端展示，那么此时的标注与开发可以使用rem作为基本单位来实现，这样实现的大屏页面在后期会有更好的扩展性与适应性。

 

10、整体细节调优与测试

这部分是指页面开发完成后，将真实页面投放到大屏进行的测试与优化。这里主要有两部分工作。

视觉方面的测试（有点像APP的UI走查）：关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。

性能与数据方面的测试：图形图表动画是否流畅、数据加载、刷新有无异常；页面长时间展示是否存在奔溃、卡死等情况；后台控制系统能否正常切换前端页面显示。

 

四、大屏设计的注意事项

1、字体使用

字体优先使用系统默认字体，需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。

如果页面是云端部署，需要嵌入字体包时，我们可以使用FontCreator这类的软件把那些用不到的字符从字体包中删掉，然后重新打包上传，减小字体包大小，可以优化页面加载体验，避免在替换默认字体的过程中出现页面文字跳动等现象。（一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符，对于大屏这个明确的场景，我们可以删掉其它使用不到的字符，仅保留中文、拼音和数字）

 

2、颜色搭配

  • 1、色彩明度与饱和度差异显著、对比鲜明， 尽量避免使用邻近色配色

  • 2、使用深色暗色背景：深色暗色背景可减少拼缝带来的不适感。由于背景面积大，使用暗色背景还能够减少屏幕色差对整体表现的影响；同时暗色背景更能聚焦视觉，也方便突出内容、做出一些流光、粒子等酷炫的效果，
  • 3、渐变色慎重使用：大屏普遍色域有偏差，显示偏色，因而使用渐变色需要根据大屏反馈确定是否调整，纯色最佳。
  • 3、页面布局: 主次分明、条理清晰、注意留白，合理利用大屏上各小的显示单元，并尽量避免关键数据被拼缝分割

 

五、Q&A

– 1、设计稿投到大屏上显示效果不佳怎么办？

大屏的分辨率、比例、使用环境、投射方式等均会对设计造成影响。理想情况下，我们应该在设计开始前，就能打开大屏系统做一些简单测试。我们可以从网上收集不同设计师不同风格的大屏设计作品，然后投上去查看实际效果。因为大多数时候大屏都会存在色彩偏差，这时通过测试我们就能发现渐变色、邻近色等不同类型的色彩搭配是否可以在目标大屏上良好呈现，如果不可以，那我们设计进行时就不要使用显示效果不佳的色彩搭配。另一方面，样图沟通环节及时测试也很重要。

– 2、大屏设计定稿后，切图切几倍图？

由于是将我们电脑屏幕投射到了大屏，大屏上的内容是运行在我们电脑浏览器上的页面。所以切图根据我们电脑的分辨率，正常切1倍图就可以

– 3、1920*1080的设计稿，投到9000*4320的屏幕上，文字图片会发虚么？

看情况，视大屏系统硬件规格与观看距离来定。这块有四个概念需要跟大家交流下。

大屏逻辑分辨率（设计稿尺寸）——显卡输出分辨率——视频矩阵切换器（DVI）支持分辨率——大屏实际物理分辨率。

一般后两个是没问题的，大屏跟矩阵切换器是由大屏厂商提供，一般刚好配套大屏。容易问题的是显卡输出分辨率，我们电脑屏幕分辨率并不是最终显卡传递到DVI接口的分辨率，传递到DVI接口的分辨率是电脑显卡所能输出的最大分辨率（部分电脑可设置或自定义输出分辨率）。输出分辨率等于DVI支持分辨率时显示效果最佳。输出分辨率低于DVI支持分辨率，DVI会将信号放大后传递到大屏，放大的过程中就有图像信息丢失，虽然此过程中有各种算法支持去保证图像尽可能清晰，但算法再好，跟真实图形还是有差距的。此外，多信号源投射效果优于单个信号源投射。对于现场直播数据大屏，一般至少有两个信号源，一个投屏，另一个也投屏但是处于备用状态。

离大屏的距离也影响观感，一般离得近，颗粒感明显，距离稍远，会显的较为清晰

– 4、设计稿完成开发后，发现在大屏上页面有被拉伸或者压缩的情况，怎么补救？

一般来讲，开发只需要对设计图做还原即可。但特殊情况下，比如显示器扩展不正确导致页面被拉伸或压缩，这时就需做处理：我们可以先得到被拉伸/压缩的比例，然后对整体视图做压缩/拉伸处理，再由其拉伸/压缩，这样被拉伸/压缩的瑕疵就可以得到一定程度上的矫正。另外，了解被投电脑硬件特点，有的电脑可以通过自定义分辨率解决这部分问题。

– 5、除自行开发可视化大屏外，还可以通过哪些第三方服务来快速实现？

阿里云DataV、腾讯云图、百度Sugar等

– 6、数据可视化的图表样式可以在那些地方找到参考？

图表部分的二个库是我们设计师可以打开浏览产看的，这里面所有的图表样式都是基于代码实现的，可以作为我们设计图表的参考，也可以让开发拿代码去用，或者在这些图表的基础修改

工具类的需要有一定的代码基础，里面同样有丰富的图表，所以跟开发的沟通也很重要，因为他们可能会了解多一些更新的前沿的图表形式是我们设计师不知道的，所以彼此多沟通交流是在太重要了

 

总结

数据可视化是一门庞大系统的科学，本文所有讨论仅针对大屏数据可视化这一特定领域，管中窥豹，如有遗漏或不足之处欢迎大家讨论交流

 

原文地址：UX设计诗  （公众号）

作者：UXBoy

转载请注明：学UI网》大屏数据可视化设计指南

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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



评论(0) 浏览(2233)

分类

日历

链接

个人资料

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

存档