首页

新项目设计时一定会遇到的5个盲区

雪涛

最近负责的新项目快上线了(感觉我好像一直在做 0-1),给大家总结了5个一定会遇到的新项目盲区及最新的解法,希望能帮助大家在交付开发前就顺利完成设计输出。


关于苹果账户登录的硬性规定

2020 年 4 月后,我们在设计 iOS 登录界面的时候都知道必须加上苹果官方强行要求的 Apple 账户登录按钮,但关于这个按钮的设计规范其实有比较硬性的规定,没有注意的话到了开发还原的时候就容易踩坑。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

在国内的 iOS 登录设计中通常突出的主流登录方式是“微信”,手机登录以及其他的第三方登录都会以更弱一点的视觉方式呈现。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

苹果官方是允许对 Apple 账户登录按钮进行一定的自定义的,其中就包含将其弱化为一个圆形的图标按钮,只是图标与圆形按钮的大小比例是官方固定的比例(这个大家直接下载官方提供的图标,它是自带留白的区域的,保持图标与高宽一致就符合要求了)。

而国外的 iOS 登录设计中通常没有那么多的第三方登录方式并存,主要的“Facebook”与手机登录通常会与 Apple 账户登录按钮同一级出现在界面中。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

这个时候需要特别注意的是,苹果官方对于这种大按钮的限制主要在于 3 个部分:

  • 按钮的高度需要等于图标的宽高(图标官方有提供下载,已经是自带留白区域的)
  • 按钮的高度需要与中间的文案成一定比例(字体是按钮高度的 43%,比如 44 的高度配 19 的字)
  • 图标离左侧最小间距需要超过按钮高度的 10%

剩下的按钮样式,比如颜色和描边也非常有限,只可以使用白色填充黑色描边与纯黑色底这 2 种。

关于安卓启动图标可带动效了

还记的早几年做安卓项目的时候上架应用商店的启动图标输出还是和 iOS 差异不大的,基本就是尺寸换换。这次输出启动图标,被安卓的开发大大告知,安卓可以出这种带动效效果的启动图标了,它的原理和效果,如下图:

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

实现这个效果的设计配合输出也很简单,只需要整理一下的具体启动图标输出就可以:

1. 启动图标(前景,不带背景的)-108dp(324px)

当然以上仅针对纯色背景,可以与 logo 主体轻易分隔的启动图标。如果是混为一体的话就需要调整输出方式为以下:

  • 启动图标(前景,不带背景的)-108dp(324px)
  • 启动图标(背景)-108dp(324px)

关于全屏切图的压缩限制

这次新项目又遇到了开发中改稿的问题,大部分都因为全屏的背景图切图大小问题。

个别全屏视觉的界面,比如闪屏、登录页、音视频语音等等,我们通常设计时不考虑切图的大小问题就会比较放飞去设计。

但实际情况是一张全屏的花色 3 倍 png 切图基本都在 2M 左右,就算把压缩率提到 80%+(市面上大部分压缩软件的压缩率都很有限,比如大家常用的 tinypng、pp 鸭等),就算你重复压缩,也有至少 200 多 KB,远远超出开发 100k 以内的切图大小限制。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

所以不得不要求我们在输出格式的时候抛弃 png 格式,启用 JPG。

不过实际设计时候我们可能仍然会遇到不能用 JPG,必须用 PNG 格式的情况(透明度蒙层),那么建议大家可以尝试以下 2 个小技巧:

  • 尽量使用纯色背景设计,这样背景图可以用代码来写,主体切图大小可以想对控制小一些。
  • 如果还是需要使用花色背景,建议可以尝试高斯模糊的花色背景,这样开发可以直接用 1 倍图进行拉伸,也可以有效控制切图大小。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

最后不想屈服于样式限制的铁汁,一定记得提前输出格式大小康康会不会超标严重(尽量控制在 100k 以内),不然无法落地再好看也没有用咯。

关于动效到底导出什么格式不坑爹

目前关于移动端界面里个别小动效的导出比较主流的几种格式是:Gif、逐帧图、Lottie(Jason)、Webp、Apng。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

Gif、逐帧、包括前几年流行的 Lottie 大家应该都比较熟悉了,这里稍微科普 2 个陌生一点的格式:

  • Apng:一个 PNG 格式的位图动画格式图片
  • Webp:2010 年 Google 推出的全部通吃的图片格式(可代替 Jpg、gif、png)

目前我觉得性价比最高的就是 webp,它的优势主要在于:

  • 压缩率极大提升,同分辨率的 webp 比 gif 要小很多
  • 支持位图、支持支持 Alpha 透明和 24-bit 颜色数、支持 3D 翻转(这些 GIf 和 Lottie 都有限制),也就是不会出现毛边啦、变色一类的坑爹情况
  • iOS、安卓都支持(比如同样高性价比的 Apng 只能用于 iOS 端)

唯一的 2 个问题在于:

  • webp 目前只兼容 Chrome 和 Opera 浏览器,其它浏览器不支持。不过基本我们都应用于移动端应用,所以浏览器兼容对这个影响应该还好
  • AE、PS 等各类动效设计的软件无法直接导出 webp 格式,需要通过插件或其他第三方软件转换。

我度娘过一些导出 webp 的方式都不是很好用,问了我司的动效设计师,推荐一个比较简单靠谱的方式分享给大家:

1. 先从 AE 导出逐帧图(记得需要循环的动效做好循环)

不知道如何到逐帧图的看这里:渲染→渲染设置→格式→选择“PNG”序列→导出即可

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

2.下载 isparta

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

3. 直接将 AE 导出的逐帧图文件包拖到 isparta 里导出 webp 格式(可选)

关于切图标注协作方式谁家强

设计交付的协同平台现在市面上很多,很多大厂也有自己内部的协同平台来承载设计交付,俺们猪厂用的叫 dbox(非常滴不好用),在强推之下开始申请经费改用 Figma 了。之前为了更换协同平台,把交付的协同平台都做了一番调研,这里给大家直接看表格吧。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

看完图大家就会发现除了 Figma 大家的使用情况不会差很多,差的主要还是钱。总的来说的建议就是,如果已经从sketch改用Figma的土豪团队就可以直接分享Figma文件链接给开发搞定切图标注以及文件存档这2件事儿了。

如果还在用 sketch 和 XD 的铁汁,交付型的协同平台我个人比较推荐 Zeplin,虽然有的人会说它服务器在国外很卡,我觉得其实还好吧,同时 Zeplin 近几年还解决了 Win 系统适配的问题。

然后最后小吐槽下腾讯的 Xshow。一开始我觉得它是最香的,因为高清度、流畅度到美感几乎都比较完美。一直到我发现了它居然是个完全开放的交付协作平台,也就是别人知道你的账户 ID 之后就可以搜到你并看到你的所有项目文件,瞬间安全系数降为 0。作为一个明显对标企业级的协作平台这么疯狂的植入社交功能,到底是企鹅的社交基因太强大还是怎么肥四?

文章来源:优设   作者:Nana的设计锦囊

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


创意设计如何增加粘性?

雪涛

要让创意产生粘性,有效而又持久,你必须有目的性提升对用户的吸引力。如何提升?

「让创意产生粘性」

这篇文章将梳理《行为设计学中的让创意更有粘性》中的经验,思考设计背后的六大原则,目的是要帮你把创意变得更有“粘性”。

这里黏性是针对创意而言的,黏性是指你的创意与观点能让人听懂,能被人记住,并形成持久的影响,关注点在听懂—记住—影响。而我们平常谈到创意,想到的是创意的巧精妙。

给设计增加粘性

那么我将用一句话,开启我的分享“万物皆可设计,创意设计也不例外。”

所谓“黏性”,是指你的创意或观点能够让人听懂,能被人记住,并形成持久的影响(换言之,他们能够改变受众的思想或行为)。

创意设计如何增加粘性?我总结了这6个方面

黏性创意的六大原则:

简单(simplicity):如何才能找到观念的根本核心?表达必须简短且深刻。简单=核心+精炼,找到创意的核心,并用精炼的话语将它表达出来,那么你的创意将拥有强大的影响力,举例:王老吉凉茶广告:怕上火,喝王老吉。

意外(Unexpectedness):如何才能吸引听众注意我们的想法?必须打破人们的期待,违反直觉,利用对方的惊讶来提升警觉度和关注度,激发他人的兴趣和好奇。粘性创意最忌讳的是平淡无奇,最基本的吸引力是引起别人的注意力,打破固有思维,最能抓住大家的吸引力,如海底捞各种出乎意料的个性化服务。

具体(Concreteness):如何才能把自己的观点表达清楚?必须借用身体行为和感官信息来加以阐释,因为我们的大脑总是乐于记住具体的事物。实验得出,人们更擅长于记忆具体化的词,而不是抽象的,形成一个长期的记忆力,如:香飘飘一年卖出七亿杯奶茶,连起来可绕地球两圈。

可信(Credibility):如何才能让别人相信我们的创意?必须具备相应的信用背景。我们必须设法帮助他人亲自证实这些构想,也就是观念世界中的“先试再买”的行事哲学。如现在的老爸测评,先进行专业权威的测评报告,得到消费者的信任,最后进行流量转化最后形成卖货的电商渠道。

情感(Emotions):如何才能让别人关注我们的创意?必须得让他人有所感觉。人们更有感觉的往往是人,而不是抽象的事物。很多创意都采用创意本身与情感的联系,如互联网大厂都在进行动物的 IP 设定,其实也是通过故事性的包装增加与消费者情感联系纽带。

故事(Stories):如何才能让别人依照我们的创意行动?我们可以讲故事。故事往往有鼓舞人的力量,我们并不需要创意来激发这些力量。我们只需要准备好生活中每天产生的好东西,通过故事的情节进行吸引粉丝,如快手、抖音很商家都会通过自己的故事情节进行吸引,树立自己的人设形象。

打造成功观点的六项检查表:简、奇、具、信、情、事。合起来的英文首字母为(SUCCES)。

在营销设计中如何提升用户感受

以上是体验设计学的一些理论,我们经常会在实际商业项目中思考,如何把商业目标与设计做结合?

创意设计如何增加粘性?我总结了这6个方面

我们进行设计时候首先应该关注三点:

  • 商业思维,你做的这个设计为公司/社会创造了什么价值。
  • 用户思维,在做设计之前大量的学习并了解用户环境,了解用户场景,了解你所做的设计是不是会有技术限制。
  • 设计思维,在一个成熟的品牌和设计团队中一定要遵循设计语言的规范、把握市场和行业的设计趋势、并且对于你自己做的设计的结果负责。

设计师针对这三点我们应该怎么提升思考?

创意设计如何增加粘性?我总结了这6个方面

1. 了解商业目标

询问你的产品经理或者运营,从他们那边了解产品想要达成的商业目的是什么?

2. 设计上的支持

从中思考设计该如何支持商业目的,产生商业价值。

3. 监视市场反馈

关注目标完成后的商业价值指标,理解当初的设计思考是否吻合市场的思路。

商业目标可能是:引起市场关注

市场中有很多好的商业案例都在,如增加用户(拼多多砍一刀“简单”)、提高转化率(网易考拉会员卡片“具体”)

创意设计如何增加粘性?我总结了这6个方面

提高客户贡献度(iCloud 升级储存空间,多种选择“具体”)、留住用户(删除软件后哭泣的形象“情感”)

创意设计如何增加粘性?我总结了这6个方面

在这些营销设计中,他们是如何使用打造成功观点并且运用体验设计法则,使用原则后,我们可以通过数据化的监视市场反馈上,如转化率、点击率、UV/PV 增长,如果你所在的公司没有数据怎么办,其实我们可以做问卷、电话回复、App 评价,微博/公众号评价获得反馈。


文章来源:优设   作者:土拨鼠

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

超详细!总监出品的B端设计规范指南:配色

分享达人

超详细!总监出品的B端设计规范指南(三):配色

B 端设计也是 UI 设计的一种,它的输出环境只存在于电子屏幕中,所以统一使用 RGB 色彩显示模式即可。

RGB 即光的三原色,因为每个像素点是由 R 红色、G 绿色、B 蓝色三种颜色的不同色彩强度混合而成。所以 RGB 色的表示可以由 3 个颜色各自使用 0-255 中的数值来呈现,比如:

超详细!总监出品的B端设计规范指南(三):配色

这是 RGB 色彩最标准的记录方式,但显然看起来特别的不直观,或者说不方便。所以在计算机中,为了方便记录和调用,使用了一串十六进制的代码来指代具体的 RGB 色。

超详细!总监出品的B端设计规范指南(三):配色

理论上,我们只要使用 RGB 模式,随便你怎么选色,只要记录 16 进制码进行复用,你就可以在任何文件、设备中获得相同的色彩。

但在实际显示效果上,不同的系统、设备、浏览器都有自己的调色板,“解释” RGB 代码后给出的色彩就有偏差。比如一样的中文不同方言、语系、背景的人可能听出不同的意思,比如牛子,我以为它是类似“晴子”这样的姓名,至于你们的理解嘛……

相关行业为了避免这样的问题,提出了 WEB 安全色的概念,即这些色彩在不同的显示环境下,能实现最接近的色彩效果。

那么安全色都有哪些呢?网上有很多地方都有对应的色卡或者工具帮助我们选色。建议使用 Google 的 MD 色卡,这套色彩最全,使用范围也最广的颜色。

超详细!总监出品的B端设计规范指南(三):配色

我们可以通过下面这个链接中的网页工具,帮助我们快速实现选色和复制色彩代码的操作。

超详细!总监出品的B端设计规范指南(三):配色

网站链接:https://www.materialpalette.com/colors

当然,设计 B 端界面并不是只能使用安全配色,这只是一种建议,可以尽量确保主色,尤其是辅助色使用安全色,而中性色可以自由定义(下面会提)。

超详细!总监出品的B端设计规范指南(三):配色

第 2 件事,自然就是讲讲该怎么配色了。和 C 端设计类似,我们主要的目标就是在项目设计过程中定义出 主色、辅助色、中性色 三种色彩类型,并把它们应用到合理的位置中去。

只是,针对 C 端来讲,B 端的配色更功能化,更理性,也更简单。我们要学习 B 端配色首先要排除那些花里胡哨的案例,比如下图这种。

超详细!总监出品的B端设计规范指南(三):配色

过度花哨的颜色会干扰我们对界面的实用和对信息的识别、检索效率,除非是一些政绩工程用来当 “花瓶” 的数据大屏,否则我们首先要排除颜色过度应用的选项。

那么什么主色、辅助色、中性色,我们先简单做个说明。

主色,即你这套产品中的品牌色彩,是整套项目最核心,重要性最高的颜色。主色的选择通常和你的品牌相关联,比如腾讯云的蓝色,阿里云的橙色,七麦的绿色。

超详细!总监出品的B端设计规范指南(三):配色

辅助色,则是用来在系统中进行强调、标识、区分的彩色系统。品牌或者 C 端设计可能会通过辅助色和主色搭配实现个性化的配色方案,但是在 B 端是没有这种诉求的。辅助色应用的目的性更强,是完全贴合操作效率来制定的。

比如下方是国外流行框架 StarBootstrap Admin 中使用的辅助色,它们都有对应的功能寓意场景。

超详细!总监出品的B端设计规范指南(三):配色

中性色,则是这套系统中色彩使用的相关灰色,因为灰色是没有色相、冷暖的区别,所以我们也称它们为中性色。主要应用在文字、背景、分割线等基础元素中。

超详细!总监出品的B端设计规范指南(三):配色

B 端的配色,即了解这三个色彩类型以后,能正确制定合理的颜色,并应用进项目中去。下面,我们分别对每个类别进行简单的讲解。

超详细!总监出品的B端设计规范指南(三):配色

1. 主色的应用规则

B 端的主色也就是产品的品牌色,多数 B 端项目中,主色不需要 B 端设计师自己选,在项目开始前就会有相关的品牌色、LOGO,直接复制色号即可。

和 C 端配色最大的不同是,品牌色在这里很多时候只是 “吉祥物”,它的存在用来宣示品牌本身的存在,但并不是任何情况下都直接参与界面色彩的填充。

假设品牌色是紫色、荧光黄、暗棕色之类的,那么这类颜色本身的内涵、寓意是难以满足功能需求的,我们要尽可能减少它们的出现面积、频次。

在 B 端设计中,主色的应用是最不需要大面积填充的,即使它是常见、耐用的蓝色、橙色,主色的填充主要只应用在下面这些类型内容中:

  • LOGO
  • 关键按钮
  • 选中状态
  • 高亮文本、图标
  • 标签用色

2. 辅助色的应用规则

有了主色,我们就要为项目添加其它色彩了。

B 端彩色的搭配原则只有一个,那就是 —— 能省就省。我们不是设计一个让用户发出感叹的色彩丰富绚丽、细节众多的视觉平面,而是设计一个用来使用的软件系统。所以前面举例的那些花里胡哨的反面案例,就一定要在正式项目中敬而远之。

用专业术语来说,配色过程要遵守 “奥卡姆剃刀原则”,如无必要,勿增辅色。

而为了满足功能性需求,可以为 B 端项目添加的辅助色类型其实也非常的有限,按寓意划分常见的也就以下几种:

  • 正确、通过
  • 链接、选中
  • 警示、错误
  • 提醒、注意
  • 失效、未完成

相信看到这里,你们脑海中已经有画面了。我们会为正确使用绿色、链接使用蓝色、警示使用红色等等。这些都是具有普世性的颜色,与用户的长期经验吻合,没有识别的成本。

而如果为了个性而个性,对辅助用色另辟蹊径,相当于在异国自驾时使用蓝灯行棕色停的系统,异国风情是有了,说翻车也就翻车了。

所以,针对 B 端辅助色的使用上,如果自己没有把握和经验,可以套用下方我们整理的 RGB 安全色,填充到页面对应的元素中去:

用谷歌色卡各选 3 个同类色出来,并进行标记

  • 正确、通过:绿色
  • 链接、选中:蓝色
  • 警示、错误:红色
  • 提醒、注意:黄色
  • 失效、未完成:蓝灰

3. 中性色的应用规则

B 端的辅助色找起来不难,难的是中性色的使用和搭配上。

任何完整的 B 端的项目,同一个界面中都包含了多个模块、层级,以及数之不尽的文本字段。在这么多的内容中,我们要根据模块、文字的权重,选择合理的中性色填充。

超详细!总监出品的B端设计规范指南(三):配色

新手很容易迷失在中性色的配色过程中,往往一套界面做完以后,使用的灰色或黑色透明度数量根本无法统计,非常的混乱。

所以,为了避免这样的情况,我会建议从开始设计之前就定一套中性色,并将它们添加到设计软件的色彩画板中,每次填充中性色的时候直接从这个色板中选择即可。

超详细!总监出品的B端设计规范指南(三):配色

那么如何制定这套中性色?首先要理解在电子显示器中,人眼对偏冷的中性色是耐受的(舒适),所以专业的 B 端项目中,中性色都带有一定的冷色色相和饱和度,比如下图是 Element 中性色在拾色器区域的分布,就并不是全灰的。

超详细!总监出品的B端设计规范指南(三):配色

所以加入冷色是有必要的,同时,我们用 HSB 色彩模式中的 B 值作为中性色灰度的主要量化标准,全黑时 B 值为 0,白色为 100,每个定义出来的灰度都可以用 B 值作为代号,如 B20、B40 等。

我们根据这个标准,定义出 5-8 级的中性色,就可以满足项目中的大多数场景。

虽然会有一些项目会使用透明度来制定灰度等级,比如黑色的 80%、40% 透明度,但我更建议将透明度使用场景和实际色值定义区分开来,只有在色彩的不同状态(选中/失效等)下再应用透明度。

结尾

有关 B 端配色的部分也就先说到这里,B 端配色远远比 C 端更简单,也更枯燥。可以使用的色彩范围更小,套路也更一致。我们要做的,就是将它们合理进行填充。


超详细!总监出品的B端设计规范指南:配色

分享达人

超详细!总监出品的B端设计规范指南(三):配色

B 端设计也是 UI 设计的一种,它的输出环境只存在于电子屏幕中,所以统一使用 RGB 色彩显示模式即可。

RGB 即光的三原色,因为每个像素点是由 R 红色、G 绿色、B 蓝色三种颜色的不同色彩强度混合而成。所以 RGB 色的表示可以由 3 个颜色各自使用 0-255 中的数值来呈现,比如:

超详细!总监出品的B端设计规范指南(三):配色

这是 RGB 色彩最标准的记录方式,但显然看起来特别的不直观,或者说不方便。所以在计算机中,为了方便记录和调用,使用了一串十六进制的代码来指代具体的 RGB 色。

超详细!总监出品的B端设计规范指南(三):配色

理论上,我们只要使用 RGB 模式,随便你怎么选色,只要记录 16 进制码进行复用,你就可以在任何文件、设备中获得相同的色彩。

但在实际显示效果上,不同的系统、设备、浏览器都有自己的调色板,“解释” RGB 代码后给出的色彩就有偏差。比如一样的中文不同方言、语系、背景的人可能听出不同的意思,比如牛子,我以为它是类似“晴子”这样的姓名,至于你们的理解嘛……

相关行业为了避免这样的问题,提出了 WEB 安全色的概念,即这些色彩在不同的显示环境下,能实现最接近的色彩效果。

那么安全色都有哪些呢?网上有很多地方都有对应的色卡或者工具帮助我们选色。建议使用 Google 的 MD 色卡,这套色彩最全,使用范围也最广的颜色。

超详细!总监出品的B端设计规范指南(三):配色

我们可以通过下面这个链接中的网页工具,帮助我们快速实现选色和复制色彩代码的操作。

超详细!总监出品的B端设计规范指南(三):配色

网站链接:https://www.materialpalette.com/colors

当然,设计 B 端界面并不是只能使用安全配色,这只是一种建议,可以尽量确保主色,尤其是辅助色使用安全色,而中性色可以自由定义(下面会提)。

超详细!总监出品的B端设计规范指南(三):配色

第 2 件事,自然就是讲讲该怎么配色了。和 C 端设计类似,我们主要的目标就是在项目设计过程中定义出 主色、辅助色、中性色 三种色彩类型,并把它们应用到合理的位置中去。

只是,针对 C 端来讲,B 端的配色更功能化,更理性,也更简单。我们要学习 B 端配色首先要排除那些花里胡哨的案例,比如下图这种。

超详细!总监出品的B端设计规范指南(三):配色

过度花哨的颜色会干扰我们对界面的实用和对信息的识别、检索效率,除非是一些政绩工程用来当 “花瓶” 的数据大屏,否则我们首先要排除颜色过度应用的选项。

那么什么主色、辅助色、中性色,我们先简单做个说明。

主色,即你这套产品中的品牌色彩,是整套项目最核心,重要性最高的颜色。主色的选择通常和你的品牌相关联,比如腾讯云的蓝色,阿里云的橙色,七麦的绿色。

超详细!总监出品的B端设计规范指南(三):配色

辅助色,则是用来在系统中进行强调、标识、区分的彩色系统。品牌或者 C 端设计可能会通过辅助色和主色搭配实现个性化的配色方案,但是在 B 端是没有这种诉求的。辅助色应用的目的性更强,是完全贴合操作效率来制定的。

比如下方是国外流行框架 StarBootstrap Admin 中使用的辅助色,它们都有对应的功能寓意场景。

超详细!总监出品的B端设计规范指南(三):配色

中性色,则是这套系统中色彩使用的相关灰色,因为灰色是没有色相、冷暖的区别,所以我们也称它们为中性色。主要应用在文字、背景、分割线等基础元素中。

超详细!总监出品的B端设计规范指南(三):配色

B 端的配色,即了解这三个色彩类型以后,能正确制定合理的颜色,并应用进项目中去。下面,我们分别对每个类别进行简单的讲解。

超详细!总监出品的B端设计规范指南(三):配色

1. 主色的应用规则

B 端的主色也就是产品的品牌色,多数 B 端项目中,主色不需要 B 端设计师自己选,在项目开始前就会有相关的品牌色、LOGO,直接复制色号即可。

和 C 端配色最大的不同是,品牌色在这里很多时候只是 “吉祥物”,它的存在用来宣示品牌本身的存在,但并不是任何情况下都直接参与界面色彩的填充。

假设品牌色是紫色、荧光黄、暗棕色之类的,那么这类颜色本身的内涵、寓意是难以满足功能需求的,我们要尽可能减少它们的出现面积、频次。

在 B 端设计中,主色的应用是最不需要大面积填充的,即使它是常见、耐用的蓝色、橙色,主色的填充主要只应用在下面这些类型内容中:

  • LOGO
  • 关键按钮
  • 选中状态
  • 高亮文本、图标
  • 标签用色

2. 辅助色的应用规则

有了主色,我们就要为项目添加其它色彩了。

B 端彩色的搭配原则只有一个,那就是 —— 能省就省。我们不是设计一个让用户发出感叹的色彩丰富绚丽、细节众多的视觉平面,而是设计一个用来使用的软件系统。所以前面举例的那些花里胡哨的反面案例,就一定要在正式项目中敬而远之。

用专业术语来说,配色过程要遵守 “奥卡姆剃刀原则”,如无必要,勿增辅色。

而为了满足功能性需求,可以为 B 端项目添加的辅助色类型其实也非常的有限,按寓意划分常见的也就以下几种:

  • 正确、通过
  • 链接、选中
  • 警示、错误
  • 提醒、注意
  • 失效、未完成

相信看到这里,你们脑海中已经有画面了。我们会为正确使用绿色、链接使用蓝色、警示使用红色等等。这些都是具有普世性的颜色,与用户的长期经验吻合,没有识别的成本。

而如果为了个性而个性,对辅助用色另辟蹊径,相当于在异国自驾时使用蓝灯行棕色停的系统,异国风情是有了,说翻车也就翻车了。

所以,针对 B 端辅助色的使用上,如果自己没有把握和经验,可以套用下方我们整理的 RGB 安全色,填充到页面对应的元素中去:

用谷歌色卡各选 3 个同类色出来,并进行标记

  • 正确、通过:绿色
  • 链接、选中:蓝色
  • 警示、错误:红色
  • 提醒、注意:黄色
  • 失效、未完成:蓝灰

3. 中性色的应用规则

B 端的辅助色找起来不难,难的是中性色的使用和搭配上。

任何完整的 B 端的项目,同一个界面中都包含了多个模块、层级,以及数之不尽的文本字段。在这么多的内容中,我们要根据模块、文字的权重,选择合理的中性色填充。

超详细!总监出品的B端设计规范指南(三):配色

新手很容易迷失在中性色的配色过程中,往往一套界面做完以后,使用的灰色或黑色透明度数量根本无法统计,非常的混乱。

所以,为了避免这样的情况,我会建议从开始设计之前就定一套中性色,并将它们添加到设计软件的色彩画板中,每次填充中性色的时候直接从这个色板中选择即可。

超详细!总监出品的B端设计规范指南(三):配色

那么如何制定这套中性色?首先要理解在电子显示器中,人眼对偏冷的中性色是耐受的(舒适),所以专业的 B 端项目中,中性色都带有一定的冷色色相和饱和度,比如下图是 Element 中性色在拾色器区域的分布,就并不是全灰的。

超详细!总监出品的B端设计规范指南(三):配色

所以加入冷色是有必要的,同时,我们用 HSB 色彩模式中的 B 值作为中性色灰度的主要量化标准,全黑时 B 值为 0,白色为 100,每个定义出来的灰度都可以用 B 值作为代号,如 B20、B40 等。

我们根据这个标准,定义出 5-8 级的中性色,就可以满足项目中的大多数场景。

虽然会有一些项目会使用透明度来制定灰度等级,比如黑色的 80%、40% 透明度,但我更建议将透明度使用场景和实际色值定义区分开来,只有在色彩的不同状态(选中/失效等)下再应用透明度。

结尾

有关 B 端配色的部分也就先说到这里,B 端配色远远比 C 端更简单,也更枯燥。可以使用的色彩范围更小,套路也更一致。我们要做的,就是将它们合理进行填充。

文章来源:站酷   作者:百度MEUX

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

B端表单设计没有高级感?那是你没用对发力点!

分享达人

前言

大家是不是时常困惑于,B 端的表单设计体现不出高级感?设计发挥的空间特别的少?

那是你没用对发力点~

B 端:设计表单页面时,一方面须尊重用户的习惯,不要在不必要的地方体现差别。总结了 4 个思考问题:

案例:以创建公众号消息自动推送为例

  • 思考用户用产品做什么事?用户会用该产品创建公众号消息推送,根据用户触发事件,推送相关信息
  • 用户用这类产品最关心的是什么?核对触发事件,检验消息发送状态
  • 用户有哪些思维定势?这里就不举例了(条件不变时,能迅速地感知现实环境中的事物并作出正确的反应)
  • 用户用过什么类似的产品等?……

另一方面要考虑信息层次。

搞定了基本要素后,我们开始考虑如何表现信息层次。

  • 封装度高、信息密度低
  • 如何判断采用哪种布局方式

什么是封装度高且信息密度低?

在了解什么封装度和信息密度前,我先跟大家讨论一下。什么是表单之间的关系。

我所认为表单之间的关系分为 3 种:

1. 常规结构

优点:

平铺所有需要填写的信息,适合内容项较少、内容项无法按照相关性分组的表单

缺点:

  • 表单页中需要填写内容众多,容易造成信息密度过高
  • 操作需要的视觉元素越多,用户的认知负担越重

使用场景:

当需要完成一个简单快速的任务,输入少量信息即可完成创建

B端表单设计没有高级感?那是你没用对发力点!

2. 树状结构

优点:

用于复杂任务时,拆解任务进行编排,适当的任务分割,可以降低用户出错率

缺点:

  • 无法在表单页中根据内容量进行合理地布局
  • 视觉噪点过多,无法兼顾页面展示和用户填写效率

使用场景:

适用于大型、复杂任务

B端表单设计没有高级感?那是你没用对发力点!

3. 显/隐结构

优点:

减少不必要(非重要)的输入项,能适当的减轻用户认知负担

缺点:

  • 虽然减轻用户输入负担,但无法高效的判定任务分割的容错率
  • 用户确认信息有一定难度,无法兼顾页面展示

使用场景:

特殊场景下使用

B端表单设计没有高级感?那是你没用对发力点!

那么用一条完整的链路来表达就是:

B端表单设计没有高级感?那是你没用对发力点!

了解完表单的结构关系知晓利弊后,那么应用在我们实际的场景中表达就是如图所示:

封装密度高且信息密度低

B端表单设计没有高级感?那是你没用对发力点!

△ 图中案例,仅做示例说明

将一个复杂的任务表单,进行封装后,看起来任务量是不是也变少了?操作起来也不是很复杂了?

小结:

分析了解表单的结构关系,判断表单,寻找共性的内容,将他们封装为一个卡片,也可以封装成一个组。主要的目的就是减少用户认知负担,提升操作/使用效率。

如何判断采用哪种布局方式?

关于使用何种布局方式的判断,应从信息的复杂度和关联性两个维度去梳理。根据信息的复杂度和相关性模型,选用相应的信息呈现方式,选用合理的布局方案来承载详情页的内容。

1. 信息的复杂度和相关性模型

B端表单设计没有高级感?那是你没用对发力点!

△ 来源:Ant Design;来源链接: https://ant.design/docs/spec/research-form-cn

2. 区隔方式

根据各个信息之间的相关性,判断各个信息模块之间的亲密度,通常情况下,相关性强的内容尽量靠近,相关性弱的的内容尽量拉开层次。

  • 不通栏分割线:将相关内容分开;
  • 通栏分割线:将内容分成多个部分;
  • 卡片:放置一个主题;
  • 页签:对象描述信息最顶层组织方式,如按版本组织、按意图组织、按阶段组织;

B端表单设计没有高级感?那是你没用对发力点!

△ 来源:Ant Design;来源链接: https://ant.design/docs/spec/detail-page-cn

3. 注意事项

  • 表单内容数量 <7 项,不建议分组;
  • 表单内容数量 7~ 15 个建议分组;
  • 表单内容数量 >15 个建议使用页签分组或采用分组标题栏展开收起样式。

文章来源:优设网       作者:交互思维



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


超详细!总监出品的B端设计规范指南:布局

分享达人

在 C 端设计中,不管是给车载客户端、手机客户端、电脑客户端设计界面,都有比较具体的规范需要我们学习和遵守。

而唯独 B 端设计,或者说网页设计,我们在网上是找不到具体详细的规范资料的。因为无论是蚂蚁的 AntDesign 还是 Element、Clarity 等 B 端设计系统,其规范都只是针对自己这套产品的设计说明。

当我们不使用这些框架,要完成自定义设计,那么新人就完全不知道该怎么下手。所以,今天这篇内容,就是针对 B 端设计所需具备了解的基本规范进行说明。

帮助大家快速了解和掌握 B 端设计所需的规范知识。

B端规范认识导言

B 端设计是 UI 类设计中的一个大类,它包含了非常多种面向企业、商业的客户端类型,包括电脑、手机、平板、大屏等等,针对不同客户端和系统,基础规范都有一定的差异。本文主要集中在 WEB 端的管理界面设计。

WEB 管理界面虽然看起来和一般的网页差别很大,但说到底,它也是网页的一种,它遵循网页设计的基本原则。我们对规范的解释以网页基础规范为框架展开,并会加入一部分 B 端特有的设计元素规范说明。

主要包含的规范内容包含下面这些模块:

  • 布局规范
  • 色彩规范
  • 字体规范
  • 图标规范
  • 控件规范
  • 表单规范
  • 表格规范
  • 动效规范

规范的解释,会涉及到不少网页前端制作的知识点,建议立志在 B 端进行深耕的设计师,都要掌握 HTML + CSS 这些前端知识。

我们过去做过这个系列的详解,可以通过下方的链接查看:

还要声明一点,规范中总结的内容,包含 “规则” 和 “建议” 两种类型,规则指的是浏览器、代码等限制产生的硬性规范,而建议则是我根据自己经验整理出来便于大家理解的内容。

在自己的项目中,如果出现 “建议” 无法适应的情况,那么完全可以根据实际场景来做决策,不需要拘泥于我给出的数值和限制。

下面,就开始进入正题吧!

B端布局规范

首先,我们来解析一下 B 端布局的规范,即界面排版应该遵守的基本原则。

在前端 HTML CSS 的知识中,需要定义不同 DIV(或其它标签)的长宽数值,并将这些大小不一的矩形进行排列、移动、嵌套,来实现界面的视觉样式。

超详细!总监出品的B端设计规范指南(一):布局

超详细!总监出品的B端设计规范指南(一):布局

换句话说,所有置入画面中的元素都包含一个矩形的外边框,无论是文字、图标、图片、按钮、标签还是符号。

超详细!总监出品的B端设计规范指南(一):布局

所以,在界面的布局中,无论我们使用什么样的内容、字段,对于前端的页面来讲都只是无数矩形的排列过程。我称这种布局的设计思路为 “矩阵布局法”。

矩阵布局法是设计方式和前端开发方式的统一,提升开发阶段实现设计稿的效率和准确性,是每一个专业 B 端设计师都需要具备的素养。

在此基础上,我们还有几个统一的原则需要遵守:

  • 数值的使用标准
  • 固定和响应尺寸
  • 常用的界面布局

1. 数值使用标准

在 UI 领域中,元素尺寸的定义不像平面设计大多以比例或“感觉”来制定,更多是使用手动输入数值的方法来完成。

主流的系统、规范都会建议我们通过网格化参考工具来辅助我们进行布局设计,比如 Android MD 系统使用的 8*8 网格系统(常用电脑分辨率可以完美支持)。

超详细!总监出品的B端设计规范指南(一):布局

也就是说,在这个系统中,元素的外边框、间距,都是以 8 的倍数来设置的。这样无论我们在设计还是在开发过程中,对于使用的数值都会有相应的默契。

但是,以 8 的倍数为基准的设计,跨越的幅度有点太大了,比如一个图标,当你觉得 16px 小的时候,那下一档 24px 页可能太大了。所以,我的建议是对于相对比较复杂的项目来说,使用小一级的 4*4 网格来设计,会更兼顾灵活度和数值的统一性。

即设置元素的尺寸、间距的时候,我们都用 4 的倍数来完成,当你觉得元素的长或宽不合适,就对它进行 4px 的增减,比如下面的案例:

超详细!总监出品的B端设计规范指南(一):布局

要警惕的是,4px 的基准,是针对元素视图边框的值,文字字号、图标栅格等次级内容,并不会受到该原则的影响。且该原则只是一个设计基准的 “建议”,而不是限制,在特殊场景中可以选择打破它。

2. 固定和响应尺寸

使用 4 的倍数完成设计,并不能解决 B 端设计中的所有尺寸问题。因为在 B 端的实际应用中,我们会加入响应式的逻辑,即页面元素尺寸随浏览器窗口的变动而变动。

所以,在设计 B 端界面元素的时候,我们要考虑两种场景,固定尺寸和响应尺寸。

固定尺寸即不管环境发生什么变化,它的大小是定死的。比如图标、标题、LOGO 等元素。而响应尺寸,则是一个 “未知数”,是需要一定的计算规则 “求得” 的。

比如还是搜索栏的案例,搜索框响应尺寸,而搜索按钮是固定尺寸,那么在不同的宽度下面,它们显示的效果如下:

超详细!总监出品的B端设计规范指南(一):布局

要理解响应式尺寸对应规则,除了了解 CSS 中 Width:auto 属性值的使用外,最简单的就是搞清楚 UI 设计软件中的响应式布局功能。

超详细!总监出品的B端设计规范指南(一):布局

元素是响应还是固定尺寸是我们在设计过程中就做后决定的,而不是等设计做完以后再看图说话。所以了解固定和响应尺寸的内容,在我们定义组件的过程中就要通过软件的响应式功能进行设置,并需要在后期的标注和文档中进行说明。

3. 常用的界面布局

最后,就是 B 端界面设计使用的主流布局形式了。虽然网页因为画布比手机大得多,设计的灵活性更高,但在 B 端中可以应用的布局形式也不多,只有固定的几种。因为 B 端页面布局中有几个常用需要预留的坑位:导航、标题栏、工具栏、内容区域。

主要使用左右或上下布局两个方向:

超详细!总监出品的B端设计规范指南(一):布局

左右布局的形式,通常是左侧作为导航区域,顶部作为工具栏使用。这种做法通常是因为系统内模块较多,需要的导航数也多,用户需要经常切换到不同模块中去,所以左右分栏的布局可以很好的提升操作效率。

而上下布局中,则是面向一些处理场景、功能比较简单的平台,导航模块少,且切换的频率不高,主要的操作都集中在内容区域的设置上,没有边栏的影响还能提高操作的专注性和效率。

要使用哪种类型的布局,需要根据当前的项目功能做决定。但即使选择了其中一类,也并不代表我们的工作就结束了,还需要在这个布局的框架下做进一步的规划。

比如,我们需要制定内容区域多栏设计的比例划分、复杂表单填写系统中的内容引导栏、列表条目展开的侧边栏形式等等……

超详细!总监出品的B端设计规范指南(一):布局

每套项目都需要先确定页面的布局框架,然后再开始针对具体页面、业务内容进行设计,保证整套系统操作方式的一致性。

文章来源:优设网       作者:超人的电话亭



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


用QQ动漫的设计系统案例,帮你掌握组件化思维

分享达人

随着项目的不断发展,设计团队在不断壮大,设计师之间的协作也越来越多,相应的沟通和协作成本在不断增加。如何才能更高效的合作,并把设计质量和一致性做的更好,是我们需要去解决的问题。

本文将以 QQ 动漫设计系统为例,分享一些过程中的思考和经验,抛砖引玉,希望对大家有所帮助。

问题之源:本地组件库

在项目初期,团队设计师的协作方式是通过一个本地的 sketch 规范文件,以复制粘贴的方式来复用一些元素和控件。在设计师协作人数不多,UI 控件改动频繁的情况下,这套流程可以比较快速的完成需求。

但随着项目逐渐成熟,协作设计师人数变多、UI 控件逐渐趋于稳定且需要复用的地方逐渐变多时,之前流程的不足就逐渐凸显出来。

用QQ动漫的设计系统案例,帮你掌握组件化思维

1. 更新通知缺乏自动化

文件更新难以做到及时有效的通知到所有设计师,且需要人工在群里发通知,告知大家更新了文件。有些设计师暂时可能没有相应的设计需求,可能会忽略更新后的文件,造成设计的不同步。或者等到需要的时候才去群里找更新的规范文件,版本容易搞错且费时费力。

2. 全局组件更新困难

由于组件样式是通过复制或修改的方式应用到界面设计中,当规范文件更新时,无法智能的自动更新修改相应的组件,需要设计师人工核对哪些地方有修改。这样很难保证大家的设计版本都能得到统一的更新,当大家使用的组件版本不一致时,输出的界面就会出现杂乱无章的情况。

3. 代码复用率低

开发没法全局调用代码样式,有些样式可能需要反复复制使用,耗时费力,并因此产生的代码臃肿,还会直接影响产品性能。

解决之道:云端组件库

鉴于设计师目前多使用 sketch+xshow 的工作流程,而 xshow 正好也具备云端管理的能力,故决定以 xshow 作为桥梁,建立一个基于 sketch+xshow 的云端设计组件库,以非常低的迁移和学习成本完成流程优化。

优化后的流程是把 sketch 本地组件库通过 xshow 上传至云端服务器,设计师通过 xshow 云端功能添加到 sketch 中,并在设计文件中嵌入这些云端组件。

用QQ动漫的设计系统案例,帮你掌握组件化思维

这样做能很好的解决上面说的问题:

1. 更新通知自动化

更新文件不用再靠人工在群里发通知,设计师也不需要去找文件,而是在 sketch 中会自动进行提醒。一旦有更新,会在右上角显示提醒消息,设计师只需要点击提醒,下载最新组件文件即可完成更新。

用QQ动漫的设计系统案例,帮你掌握组件化思维

2. 全局组件一键更新

当更新组件库文件后,界面中所有之前使用过云端组件的控件元素都会自动比对更新前后的差异,方便设计师判断是否更新。这种更新最厉害的地方在于,更新是全局的,也就是一旦你确认了更新后的内容,所有界面都会自动按规范进行更新而无需设计师再逐个筛查。这样做既能保证设计稿的一致性,也能大幅提高设计效率。

用QQ动漫的设计系统案例,帮你掌握组件化思维

3. 开发效率和质量大幅提升

开发通过代码把一些常用的样式进行封装,在一些高度复用的场景中直接调用。一方面可以通过调用的形式减少重复样式代码的复制,精简代码,降低软件包体积,另一方面也可以减少不必要的工作量还能方便后期维护。

实践之行:云端组件库搭建

想要高效解决问题,正确的方法很关键,这里我们用到的方法就是原子设计理论。2013 年前端工程师 Brad Forst 将此理论思想运用在界面设计中,形成一套设计系统,包含 5 个层次:原子、分子、组织、模板、页面,这套理论为组件库的搭建提供了思路和方法。

在实际搭建过程中,因为组件库的搭建工作量往往比较大,需要先明确流程和分工,主要包括以下几个关键步骤:

用QQ动漫的设计系统案例,帮你掌握组件化思维

1. 明确工具流程

因为是搭建云端组件库,所以首先需要有一个云端工具进行管理。针对以 sketch 为基础的云端组件库来说,常用的工具流程包括 sketch cloud,各类云同步盘,第三方云数据库自主部署等等。我们选择的 sketch+xshow 工作流也是基于 xshow 具备云端管理功能,与其他流程本质上是一样的,大家根据项目实际情况合理选择就好。

用QQ动漫的设计系统案例,帮你掌握组件化思维

2. 全面汇总并分类

按原子理论由小到大来对常规控件进行汇总并分类。对于 QQ 动漫项目来说,常见的控件类别包括:颜色、字体、图标、按钮、导航、状态栏、弹窗、列表、标签等等。每个项目所需要整理的组件不尽相同,原则就是对要复用的元素进行整理。

用QQ动漫的设计系统案例,帮你掌握组件化思维

3. 制作样式模板

为了便于维护和提升合作效率,将组件库拆分为几个不同的独立文件,每一个文件由组件库搭建小组成员独立负责,减少混乱。

如果是有多位设计师参与时,因为组件库的元素存在相互调用的情况,会遇到到底谁先做的问题。解决流程分 2 步:

  1. 由一位设计师把组件库的原子级组件(主要包括颜色,字体,图标)先做好,并建立分类组件标准模板,其他设计师在这些模板基础上进行完善,保证组件库在逻辑层级统一。
  2. 如果过程中遇到,自己组件中需要调用对方组件,比如某个图标没有在图标组件文件中,但自己的列表中又需要,可以先用其他组件中的图标代替,等图标组件库更新后,再同步更新这里的组件即可。

QQ 动漫组件库一共分了 5 个不同文件,分别是:基础、操作、导航、反馈和内容。

用QQ动漫的设计系统案例,帮你掌握组件化思维

4. 搭建本地组件库

1️⃣ 确定命名逻辑

提升设计效率,是组件库存在的重要目标之一,而合理的组件命名起到了至关重要的作用。组件的名称要保证通用性,太独立的命名可能不够兼容其他场景,也会让使用的同学产生误解。

对于组件命名,要多与使用的设计师一起探讨,因为每个人的习惯都不同,方不方便因人而异,所以需要做一些平衡。

比如在做图标命名逻辑的时候,纠结于要先按尺寸分(图标/序号类别/尺寸/图标名),还是按功能分(图标 / 序号类别/尺寸/图标名/状态),不断调整多次,这时候就需要找大家一起探讨,怎么才是最方便的。

用QQ动漫的设计系统案例,帮你掌握组件化思维

命名的方法是尽可能按共用属性由多到少的顺序来整理。比如,图标共用的尺寸属性多,就把尺寸归到上层;如果图标功能分类比较集中,那就把功能名称归到上层。根据实际项目和设计师使用情况的不同,会有不同的命名形式,命名确保效率就好。

在梳理组件库结构命名时,先用思维导图描绘一份结构化地图,方便前期讨论及调整。明确层级关系后,用在多人合作时进行参照,从而统一组件库层级。在做这份结构化地图时,需要列好全部分类、层级、具体名称及示例。

用QQ动漫的设计系统案例,帮你掌握组件化思维

2️⃣ 颜色

颜色库的设计,需要将产品中可复用的颜色汇总并分组,比如品牌颜色,按钮颜色,图标颜色,装饰颜色等等,这样可以使得用到颜色属性的组件更加灵活。颜色的命名规范是:序号_功能/浅色 or 深色/序号 _ 属性 / 序号 _ 状态。例如,04 _ 按钮色/浅色/01 _ 常规按钮/04 _不可点

用QQ动漫的设计系统案例,帮你掌握组件化思维

3️⃣ 字体

字体样式需要做全字重、颜色和左中右三种对齐方式,因为按目前 sketch 的组件逻辑,还不能修改嵌套字体的属性。这些属性可以对应到组件的命名上,字体组件的命名规范是:大小/序号对齐方式/属性/用途,例如 42px/1 居左/常规/主文本。

用QQ动漫的设计系统案例,帮你掌握组件化思维

边做边检查。由于文字组件需要的命名特别多,很容易出错,所以建议是最好每做一组,就检查一遍。检查的时候打开组件样式,如果在组件预览中发现重复或者结构不对的地方,及时调整。

多行文本行高要注意。文字的行高要尤其注意,一定要在前期检查好尤其是多行文本的行高。如果行高前期设置不对的话,非常影响后面文本的扩展性,在用到多行文本时会遇到麻烦。想回头修改的话,因为是最底层的原子需要逐个调整,所以代价是巨大的。

所以一定要开始设置字体组件之前就确定好行高,比如 QQ 动漫组件库中的文字行高统一用文字大小的 1.5 倍,并取偶数作为文本的行高。当然,这里的行高也不是完全规定死,有时候也需要视情况而定。

文本的粗细。文字的粗细也是要在一开始的时候就要设置周全,最好是给所有字号的文字都设置好不同粗细的组件,尽管可能开始用不到,但会提升文字的扩展性,不然后面添加就会比较麻烦。

4️⃣ 图标

图标组件最关键的地方在于使用逻辑和图标规范。比如,我现在做的图标逻辑是:图标/类别/使用场景/具体名称/尺寸/不同状态,主要是按使用的频次来整理的。也可以有其他逻辑方式,以方便使用为准。

用QQ动漫的设计系统案例,帮你掌握组件化思维

图标规范也会影响组件库的整理和日常使用,在做图标组件时,需要定义好图标的最大范围和最小范围,嵌套起来使用才不会出错。图标的规范要严谨,同一个尺寸下的图标视觉面积要保持一致。不然在大小这个层级就会出现,虽然是相同尺寸的图标切图范围,但图标的体量看起来却并不一致。

用QQ动漫的设计系统案例,帮你掌握组件化思维

将纯色或渐变图标中的颜色剥离,并使用颜色组件进行嵌套,这样做既方便替换又能减少图标组件库的复杂度。

用QQ动漫的设计系统案例,帮你掌握组件化思维

对于图标的多种状态,建议做在同一个层级中方便选择。

用QQ动漫的设计系统案例,帮你掌握组件化思维

对于图标来说,直接对画板设置切片即可,不需要再加切片框。如果你的组件库之前用了很多切片来导出图标,可以用 Automate 插件直接清理或设置全局的切片,非常方便。

用QQ动漫的设计系统案例,帮你掌握组件化思维

5️⃣ 控件

有了颜色、字体、图标这些基础元素后再来制作组件就会相对简单很多,只需要通过拼装把通用性强的组件做出来即可。这里可能需要注意设置好布局方式,让内容盒子随着内容的变化而变化。新版 sketch 的布局设置相对于老版本的确实会方便很多,理解起来很容易,所以这就不多讨论了。

用QQ动漫的设计系统案例,帮你掌握组件化思维

6️⃣ 代码组件化

在开发侧进行前端 UI 组件库的封装,实现从设计到开发的样式统一,提升效率和质量。

用QQ动漫的设计系统案例,帮你掌握组件化思维

在优先级上,代码组件化跟 UI 组件化可以同步进行,开发先写好框架,然后随着 UI 组件化的逐步确定,代码也进行相应补充。

5. 构建云端组件库

本地组件库构建完成后,即可通过 xshow 上传至云端,再由 xshow 直接添加到本地 sketch 中,完成整个使用流程的搭建。

6. 权限与维护

为了更好的维护云端组件库,避免更新混乱,需要成立组件库小组,只允许组件库小组成员有编辑权限。日常需求中,如有新增组件,需提交给组件库小组成员审核,通过后方可上传至云端组件库。

在制作组件文件的过程中,需遵循先自测后上传的原则,避免在上传后发现一些诸如命名错误、遗漏、嵌套混乱等问题,造成麻烦。

7. 编写规范文档

文档的作用是给相关同事查阅,形成标准化使用流程。一些在组件库中难体现的设计说明、未形成组件元素的使用规则或一些常见问题都可以写在文档里。

用QQ动漫的设计系统案例,帮你掌握组件化思维

8. 问题与技巧

1️⃣善用插件,提高效率

我其实是一个非常喜欢“偷懒”的人,但凡需要重复,批量的工作,我都觉得应该有更聪明的办法。这里我推荐几个我在做组件库中经常用到的小插件。

2️⃣不断测试

组件库的设计过程中,一定要边做边测试,尤其是在前期确立逻辑的时候,要不断检测是否真的好用。

3️⃣内容更新权限与维护需要专人专办

举例:假设我负责字体,那么后续所有的字体更新相关都只找我来修改。若其他人在组件库内找不到相应的组件搭建页面而又特别高频使用,需要向组件库小组提出申请,并由对应组件库管理员进行更新,不可以私自修改组件库内容并上传。

总结

组件化思维不仅仅应用在 UI 领域,甚至在各行各业都需要建立组件化,比如对于一些时效性非常强的新闻产品,就需要针对突发事件内容模板化,以期能第一时间发布;如果想追热点,组件化能够使得产品具备随时跟进热点的能力,提升市场竞争力等等。

组件化是一种思维模式,也是如今设计师必不可少的能力。通过组件库提升效率能够让设计和开发有更多的时间去打磨产品细节,从而打造出对用户更加友好的产品,赋能设计的价值。


文章来源:优设网      作者:腾讯ISUX



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

适老化设计怎么做?

雪涛

前阵子回老家的时候,在老人家里看到这样一个机器,这个机器的功能主要为家庭教育、视频通话与监控等等。


如果这几个主要功能入口屏幕占比能更大些、界面中的菜单导航层级能再简化些...也不至于连我自己想找到一个能跟亲人通话的入口都比较困难,更别说老人了。



当然了,这个机器最后只被家里的老人当成,一个只会定点报时的“摆设”。


除了把字号放大,适老化设计还需要做什么?以下分享京东直播在适老化设计上的几点探索。



强化对比——看清信息


直到近几年才知道,家里的长辈喜欢发微信语音,其实是因为老花眼打字不方便。


在适老化设计中,需要注意界面中的信息与背景的对比度,是否足以让老年人清楚识别,这涉及到对色域跨度的调整。


我们通过 H(色相)S(饱和度)B(明度)的数值来划分色域。如下图,在统一H值的情况下,规定了10个标准的S、B值,从而形成一个色带。所以我们在前后景的颜色选择上,需要满足跨度至少为5 ,才能让老龄用户清晰地识别到前景信息。



比如在京东直播的老年版界面中,不仅加深了原标准版中的浅灰色文字信息,同时对一些暗文设计也进行了调整,如搜索框暗文“点击搜索主播名/商品”等内容,提升暗文明度以确保与其背景间的色域跨度大于5。


所以在适老化设计中,需要让界面中的信息与其背景间的色域跨度至少为5,才能足以让老年人看清信息



传达共识——看懂内容


90前的人想要表示“打电话”,会用手比出6的姿势贴在耳边;而现在的00后,会用手掌当作手机的样子贴在耳边来表示…


在让老年人能够看清界面中的信息之后,我们的设计还需要有更清晰的表意信息,让他们能够看懂。其中的关键在于,这些信息是否能够“传达共识”。


无法传达共识的设计,就像00后的小孩突然摆出用手掌贴在耳边的姿势,家里的老人看了可能也无法领会到,这表示的是“打电话”的意思。


在设计中想要”传达共识”,需要尽量避免图形icon的单独出现,用纯文字或图+文的形式表达。不过除了给图标加上文字,其实我们在图标本身的设计上也可以进行适当调整。



比如同样表达“话费充值”,是用手机还是座机,哪个更能让那个年代的长辈理解?哪些事物是那个年代惯用的,哪些事物是在那之后才诞生的?哪些是我们日常生活中就存在的东西,哪些又是专属于互联网世界的产物呢?


所以在适老化设计中,除了帮界面里的所有图标加上文字以外,在图标的设计上也可以结合年代、群体环境的因素,让图形表现的是老龄年代惯用的、日常生活中固有的内容,让老年人也能轻松领会到,这表示的是什么。



联系认知——找到点击区


就算没使用过手机的人,在生活中看到凸起的事物也会忍不住按一按;但如果他们看到的是一个圆圈,就不太可能有这种反应了。


在适老化界面中,需要代入更多能够联系生活经验的认知锚点,帮助老年人顺利在界面中找到点击区域。其实不妨回想一下,即使是现在熟练使用手机的我们,也是从当时iOS4的拟物化界面,开始慢慢地培养心智,才能到如今就算看到一个线框、甚至只有纯文字,也能轻松分辨出哪里是可点击的按钮。


而当下的老人,也正像当时一开始接触智能手机的我们,需要在界面中找到与自己生活经验的对照,才能利用熟悉的事物作为认知锚点,帮助自己理解联系上一些陌生的概念。


比如将界面中可点击的区域强化投影或高光,帮助老人们联系起生活中对凹凸的认知试着去点一点。除此之外,我们还需要把一些会对点击认知产生干扰的内容进行弱化。



比如在标准版的京东直播中,存在像红包雨、奖券这种运营标签,其样式看起来与按钮很像,但实际为不可点区域,所以在老年版界面中弱化了这些标签,将他们与所在的列表内容作为一个整体背景,让视觉重心聚焦在可点击的按钮上。


所以在适老化设计中,除了需要对可点击区域强化投影以联系认知,也需要将一些不可点击的干扰项进行弱化,保证视觉重心最终落在可点击区域上



行为指引——完成点击


美国新泽西北部一家电影院做了一个潜意识实验:在电影中每隔5秒就插入0.03秒的字幕,写着“吃爆米花”和“喝可乐”,虽然人的肉眼无法捕捉到0.03秒出现的事物但它们可以堆积成潜意识,随后当天影院的可乐销量增加15%,而爆米花则增加了58%。


在适老化设计中,我们还可以运用潜意识作为界面中的隐形向导,帮助老年人顺利完成目标行为。


比如在按钮的文案中包含行为动作、结果去向的内容,像“点击领券”中的“点击”——对当下需要完成的动作描述,“领券”——动作完成后的结果去向,让每个一眼晃过的引导效果堆积,成为界面中的隐形向导,帮助老年人了解如何完成操作。


像在京东直播的老年版界面中,也同样设计了这些隐形向导。比如在列表上加入“点击进入直播间”的按钮,引导老年人顺利了解到“我当下可以进行点击”以及“我点击后可以进入直播间”的信息。



除了对按钮文案的调整,我们还可以为一些非明确的可点击区域加上行为指引。比如在主播力荐中,每个商品图片都可点击看对应的主播讲解,因此为每个商品加上带明确行为意图的点击按钮,避免让人以为这只是一些展示图而并不知道这其实都是可以点击的。


所以在适老化设计中,可以在按钮文案中加入行为动作、结果去向的内容,同时对一些非明确的可点击区域加上行为按钮,发挥潜意识的隐形引导作用,帮助老年人顺利地完成目标行为。



以上仅展示阶段性成果,设计方式、设计理念等,我们的探索远没有结束,期待下一次分享中与你们的交流。


文章来源:站酷   作者:SDL艺术实验室

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



服务设计概述及国内外案例分析

分享达人

5分钟带你了解服务设计的原则、案例及常用方法!




我们常说,现在是体验至上的时代,用户对产品的使用不再是单纯的需求满足,更要获得满意的体验。服务设计的发展为我们改善用户的体验提供了新的思路,从本质出发,任何产品都是在提供某种服务,服务的质量从根本上决定了用户的体验。



什么是服务设计


服务设计一直在我们的生活中,我们无时无刻不在体验着各式各样的服务。荷兰一家专业的服务设计机构31 Volts是这样描述服务设计的:“如果有两家紧挨着的咖啡店,出售同样价格的咖啡时,服务设计是让你走进其中一家而不是另一家的原因。”这个描述很生动,同时也说明了服务设计的作用。


其实服务设计的定义还有很多,行业内不同的专家和学者都有自己的理解和解读,不管定义如何,重要的是服务设计的思维方式,可以帮助我们从全局改善服务体验。




服务设计的原则及案例说明


2010年在《This is Service Design Thinking》一书中,作者首次提出了5个服务设计基本原则,这些原则之后也被广泛使用,但随着服务设计的不断发展,其中的一些原则也需要重新去审视和思考,因此在2017年作者将其更新修订为6项。


a.以人为中心(Human-centered)


以人为中心的设计理念在产品设计、交互设计等领域已经得到了广泛的应用,服务设计当然也没有例外,以人为中心就是要站在用户的角度上看待和思考问题,考虑所有被服务影响的人。


在日本,农产品市场存在这样一个问题,农产品批发商无法及时从种植者处了解农产品的相关状况、收获量等信息,因此他们也就无法与要购买农产品的人进行谈判,这样造成的结果可能是粮食的浪费。日本的一家软件公司NJC(Nippon Jimuki Co. Ltd.)发现了这一问题,他们希望利用自身能力(软件方面的优势)去解决这一问题,因此将目标设定为:创建一个可以提供有用数据而又不给农民或农产品批发商带来负担的系统。


最终的产出的结果是Fudoloop这个应用程序,通过Fudoloop,批发商可以提前一天从农民那里收到信息,进而协调买家的各种要求。Fudoloop的使用者分为两种,一种是需要更新农产品信息的农民,一种是从Fudoloop上获取农产品信息的批发商,Fudoloop分别为两种用户进行了设计。

图片来源:Fudoloop



在设计Fudoloop时存在这样一个问题,农产品市场中的相关从业人员普遍年龄较大、受教育程度低、软件使用经验很少,面对这样的用户,显然通常的软件设计并不符合他们的需求,因此Fudoloop的界面设计非常简单且信息突出,从事农产品相关工作的人员可以轻松的使用Fudoloop完成农产品信息的更新,而不会因为学习产生很大的压力。Fudoloop还在大型农业贸易展览会邀请了一些行业内的人员和用户参与到了产品的体验中,并收集了他们反馈的建议,以改善产品。

图片来源:IDEO


NJC在设计Fudoloop时充分坚持了以人为中心的原则,考虑到服务涉及的不同用户,并根据用户本身的特点和需求进行设计。NJC的CMO佐藤贤一是这样评价Fudoloop的:“当简单、以人为本的思想汇聚在一起时,创新就会发生”。



b.协作(Collaborative)


这条原则说的是,不同背景和职能的利益相关者应该参与到服务设计流程中,收集多方诉求,发现不同看待问题的角度,才会更好的解决问题。


在美国旧金山,有一所学校和Revolution Foods这家餐饮公司合作,为学校内的人员提供丰富的、营养的午餐,但是实际来餐厅就餐的人数与预期相差很大,数据显示,有72%可以承担起午餐费用的人并没有来到食堂吃午餐。经过调查发现其中的原因,很多学生等校内人员并不愿意排长队或者匆忙的吃完午餐,因此他们选择了去校外享受午餐的时间。


为了改善这种情况,这所学校请来了全球顶尖的设计咨询公司IDEO,他们与1300多名学生、父母、营养人员、董事会专员、校长、老师和社区团体等利益相关者一起工作,重新去设计了学校的午餐,并且制定了针对三种年龄的就餐体验的建议,完成了饮食、就餐空间、新技术使用等多方面的优化和设计。

图片来源:IDEO


最终,学校完美的改善了午餐服务的体验,这其中包含了所有利益相关者的想法和工作,因此设计成果也被人们所接受,越来越多的校内人员会选择学校的午餐,之后,这种设计模式也被旧金山的许多学校采纳和推出。


所以,服务中涉及到的利益相关者有很多,多收集他们的想法与建议,甚至让他们参与到服务设计中去,问题会得到更好的解决。


c.迭代(Iterative)


迭代是一个不断接受反馈不断优化的过程,如此重复执行,让产品变得越来越好。服务设计也需要迭代,不要避免犯错误,而是从错误中学习和改变,同时也要不断的收集各方的反馈信息,这些信息是服务进行迭代的核心所在。随着互联网的发展,迭代的思维早已渗透到每一个互联网产品,此处就不再过多解释。


d.有序(Sequential)


服务设计应该是一系列相互关联的活动,并且是按照顺序进行的,精准的把控服务每一个环节的节奏,用户才能获得更愉悦的体验。


以外卖为例,用户的使用过程包含订外卖时的商家选择到下单过程,下单后配送外卖,用户收到外卖和用餐后这几个过程,而服务的提供者主要包括商家、平台和外卖小哥,为了保证用户能够获得流畅的服务体验,需要各个服务提供者在服务展开的不同环节推出优质的服务,如下图。


在订外卖时,平台会为用户推出“超值优惠”“限时秒杀”等优惠活动,商家推荐、订单历史等商家选择渠道,以及不同的筛选条件,以上的目的都在于帮助用户快速找到自己期望的、合适的商家。在用户选定商家后,进入到选择商品并下单的过程,一方面,商家会推出优惠的活动、推荐菜品等,另一方面,平台也会给出自己的优惠。


下单后,用户面临的是一个配送过程中的等待时间,为了缓解用户在等待过程中的焦虑情绪,平台会及时更新和推送外卖小哥的状态,如到达商家、取餐中、与用户的距离等,同时会给出用户预期的送达时间,若超过预期时间用户还可进行催单,商家可以联系用户表达歉意,整个过程用户对配送状态是可视的。


用户收到外卖时首先会与外卖小哥接触,包括与外卖小哥提前确定取餐的时间地点,取外卖时的短暂对话等,这些都会影响用户对服务的印象,因此外卖小哥需要保证服务态度的礼貌和友好。收到外卖后,食品包装首先给到了用户对商家的第一印象,然后是餐品是否符合用户预期,让用户满意。


在用户就餐后,首先平台要提供给用户评价的功能,用户可以分享自己就餐的感受,商家也可以通过平台为用户提供更多的优惠,引导用户能够再次回到商家订餐。


从外卖的案例中我们可以看到,服务是一个过程,是需要有序展开的,每一个环节的体验都会影响到用户对服务的印象,在恰当的环节提供恰当的优质服务,才能确保用户的整体体验。


e.真实(Real)


服务本质上是无形的,应该用“物理元素”来可视化,这样可以用户的服务记忆,增强用户对他们所接受服务的感知。


同样以上述外卖为例,商家为用户提供餐食,这部分是借助美团这个平台和外卖小哥来完成的,用户和商家的接触仅仅是送达的餐食,因此无法通过像到店体验一样,让用户感知到商家提供的更多服务。


为了让服务变得更加“有形化”,商家就需要花费更多的心思,如图,商家为了增强用户对服务的感知,一般会在在包装上花费很多功夫,精致的包装让商家的形象更好且更加值得信任,一些有趣的包装还可能让用户的心情变得愉悦。另外,商家也可以通过一张便利贴的温馨问候或者赠送小礼品等方式让用户更真实的感受到服务,通过这样的手段,即使用户并没有真的接触到商家,体验也会变得很好,商家的形象也会提升很多。

图片来源:古田路9号


f.整体(Holistic)


整体就是要着眼于整个用户旅程,考虑用户与服务的每个触点(触点的概念后文会进行介绍),并兼顾多方利益相关者的需求。也就是所谓的全方位服务体验,考虑服务环境的方方面面,没有任何遗漏。这个原则实施起来并不是那么简单,从整体角度思考问题会使问题变得复杂。不过在服务设计中,是有一些方法和工具是可以帮助我们完成整体思考的,比如服务蓝图。




服务设计的常用方法-服务蓝图


a.服务蓝图简介


服务蓝图是一张图表,通过列出在每个阶段发生的、不同角色执行的所有活动,显示了服务的整个过程。如图所示是一个服务蓝图的简单示例,垂直方向上展示服务中的利益相关者,水平方向上为用户的历程,也就是用户经历的不同阶段。在服务蓝图中有两条线,一条是可见线(line of visibility),可见线上方为用户可与之交互的服务,也可以称之为“前台”,可见线下方代表的是后台进程,用户无法看到但需要给用户提供支持,后台进程还可以存在内部交互线,用来表示内部人员的联系。用户与前台服务之间存在另外一条交互线(line of interaction),用来表示用户与服务之间的接触。

图片来源:Service Design Tools


明确了服务蓝图的大致框架之后,还需要注意服务蓝图中一个非常重要的概念——触点。触点就是在服务的各阶段,用户和产品、服务、后台产生的接触,每个触点也是服务可以进行展开和优化的方向。


b.Uber服务蓝图绘制


为了明确服务蓝图的绘制和分析过程,下面将结合下图所示的Uber服务蓝图进行说明。

图片来源:Medium


(1) 明确用户历程


用户使用Uber打车服务主要可以简单分为以下三个阶段:注册(下载APP - 新用户注册),乘车阶段(下单 - 等待车辆到达 - 乘车 - 到达目的地)、乘车后(付款 - 评价)。


(2) 明确利益相关者


用户与之产生互动的前台服务人员为司机,而设计师、开发人员、项目经理等负责后台的服务支持,以保证Uber按照预期的目标运作。


(3) 明确前后台活动


一方面,需要明确和用户接触的前台活动有哪些,Uber打车服务中和用户产生接触的主要为司机及车辆,因此需要确保司机是合格的、车辆内部的环境是干净舒适的,同时司机在与用户接触的过程中需要提供礼貌的问候和交流,满足用户在乘车过程中的要求,完成乘车费用的收取,提醒用户离开前带好随身物品,以及评价乘客等。


另一方面,用户对后台的流程可能并不了解,但需要明确哪些后台活动和支持会对用户产生影响。比如在用户下单时能够自动获取用户定位,告知用户预期的时间和价格,以及发送给用户司机的状态等。


在明确前后台活动时,我们可以以用户历程为线,分步骤进行分析,确保每个环节中涉及到的前后台活动没有被遗漏。


(4)明确关键触点


在服务蓝图中我们可以标注用户与服务的主要接触点,针对触点进行设计是提升服务体验的一个重要和有效的手段。


在Uber打车服务中还有一些需要注意的触点,一是等待时间,这包括用户发起乘车请求后、付款时以及评价司机时,等待时间是造成用户体验较差的一个原因,因此需要注意标注出这些触点,并想办法优化,在服务设计中需要注意相关环节的应尽量简单,减少用户的等待。另外需要注意的是会对体验影响较大的触点,如司机态度不友好、乘客下车时忘记带随身物品等,可能造成失败的服务体验的触点应该精心地去设计,避免这样的情况发生。


通过以上过程我们完成了Uber服务蓝图的绘制,从中可以获取到Uber打车服务的整体概貌及其相互关系。



///


结语


服务设计的思维能够帮助我们从全局的角度去审视和思考,发现更多改善服务的可能性,从而为用户提供更好的体验。因此对于产品和设计等相关人员来说,不能仅仅把目光放在产品本身,而是要从服务的角度去正确看待产品和用户的关系,以用户为中心,找到用户与产品的每一个接触点来进行服务设计,这样才能保证用户在整个流程中都能得到好的体验。



文章来源:站酷   作者:百度MEUX

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




如何建立价值思维?

雪涛

用户体验设计就像是一场直面自我的修行,无论是从认知提升、工作能力等维度,都在时间和实践中不断去促进自我对事物的探索,在过程中不断获取对世界的感知和成就感。在学校里所接触的关于交互设计的认知,大部分局限于产品领域与基础交互,而后逐渐过渡到交互体验与设计的结合并且作用于商业,成长过程中也会不断思考,这次想聊聊设计价值,大概分为三点:价值思维、价值判断、价值体现。

建立价值思维

我的设计能够给用户/产品产生什么价值?如何体现设计的价值?可能很多朋友也会和我一样有这样的疑惑,假如能够在接触需求后便思考该需求背后的价值,那对应的行动也会有很大差异性。

1. 设计的困境

可能对于大部分的设计师而言,作为主要的执行力,需要肩负起项目的责任,所以会把大部分时间都投身在项目需求和日常沟通来提升自身能力,很少有剩余时间去沉淀已做完的设计,只有在产品体验会或者其他渠道的反馈中获取最后的问题,久而久之就像是打补丁,既无法体现设计价值,自身能力也无法得到完整的提高。然而促使设计师进步的往往不是技能的熟练,而是对业务需求思考的广度和深度。因此需要树立起价值的概念,价值可以驱使行动产生改变。

2. 价值驱使行动

价值观因人而异,而价值观会影响一个人的行为引导其做出选择,对价值的思考取决于思维上升空间有多大。因此需要有一个思维模型能够帮助我们更好的建立起价值思维,可以帮到我们更加有逻辑的思考。相信许多朋友都听过「Why-How-What」即黄金圈法则,个人认为可以从日常需求中帮助设计师建立起一套价值思维。黄金圈解析:

  • Why:为什么做一件事,基于什么样的目标
  • How:怎么做,是实现目标的途径
  • What:具体的行为

设计师进阶知识点:如何建立价值思维?

△ 图片来自网上

3. 黄金圈法则实践

了解黄金法则后,我们看看如何把黄金圈的思维模型运用到工作中。

假设我们接到一个「商城系统」的设计需求,可以尝试这样拆分:

WHY:我为什么做

  • 商城是产品重要的盈利渠道,能够为产品带来核心收益
  • 设计赋能商业化,是设计的价值体现
  • 能够帮助设计师更好理解产品的商业化结构

关注点:站在产品角度,对产品真正的帮助和提升

HOW:我要怎么做:

  • 梳理玩家的购物场景和细分需求
  • 整理同类竞品的优缺点,挖掘机遇点
  • 明确设计目标,突出商品展示特点

关注点:需求做的更好,超出玩家预期

WHAT:需要做什么

  • 高效便捷的购买流程
  • 兼顾玩家的情感诉求(炫耀、仪式感)等细分场景设计

关注点:让玩家使用更加高效,满足多种场景

综上所述,设计师处于不同的阶段,所关注的价值层面对应的行动也会不同,不仅要求设计师在需求之外还需要全局思维的思考延伸,了解当前产品阶段最需要的是什么,更多需要设计师自我审视,建立价值思维的思考模型,不仅仅停留在行动层的思考。

(我为什么要做)价值观——(我要怎么做)能力——(我要做什么)行动

形成价值判断

「黄金圈」法则可以帮助我们建立起价值思维,然而每个设计师有各自的价值衡量,以下是我认为的一些价值维度:

1. 层次与目标

日常我们总会接受到大大小小的需求,简单和复杂会掺杂混合,从工作角度而言需求是都要做的,但是从设计价值的角度而言,需求是有轻重缓急之分。那如何进行价值判断呢,一般的设计需求从目标上可分为三个层次:

  • 基础目标:满足「可用性」
  • 体验目标:满足「易用性」
  • 惊喜目标:满足前两者基础,让用户感受「愉悦感」并且超出预期

设计师进阶知识点:如何建立价值思维?

2. 二八法则分配

当有了一个基础划分后,就可以对需求进行合理评估,考虑到现实情况下通常会面临这些情况:

时间紧迫:日常需要大量的时间进行协作沟通和跟进

精力有限:任务重加班多,无法长时间保持高效的工作状态

所以可尝试根据二八法则对时间精力进行分配,对于一些价值较低的需求,可以和需求方充分沟通,过滤无效信息后快速处理;对于价值较高的需求,投入大量时间与精力设计与打磨。对于初中级的设计师来说,满足「可用性」和「易用性」是仍需要多加锤炼的基础能力,对于高级以上的设计师来说,有了一定的经验下达成前两者较为容易,可以把更多的时间精力投入在「愉悦感」的设计上。

体现设计价值

前面讲了价值与判断,但设计无论是赋能或者是驱动,还是需要明确最终目标是什么,我的理解是最终服务于产品解决问题。那如何体现设计价值就显得尤为重要,以下简单抛出两点:

1. 提升体验和口碑

虽然不能直接为产品带来实际收益,但是带来体验提升,而口碑的增长相当于为长线运营打下基础,也为后续进入的产品矩阵留下增长空间,例如最近大火的《天地劫》,相信后续的出品也会让玩家更加期待。

像这类的例子有许多,例如《王者荣耀》的公众号还有专门的 UI 迭代日记,即便是运营多年的产品仍然在不断的打磨和提升体验,为产品带来正面影响。

设计师进阶知识点:如何建立价值思维?

△ 图片来自王者荣耀公众号

2. 带来商业利润,促进社交、消费增长

这类体现通常是商业化/社交相关,《阴阳师》众所周知的抽卡系统和「画符咒」的交互方式也带来了大量的社交互动和用户增长,还有《Pokémon GO》捕捉宝可梦和「投掷精灵球」,促进了玩家大量的线下的互动场景,我认为这些都是设计价值的体现。

设计师进阶知识点:如何建立价值思维?

这些设计相对于大部分玩家是一种「隐形」的存在,不像角色、场景设计等容易被感知,对于设计的价值体现一定不只是给产品锦上添花,是能够通过对用户/玩家群体的理解去塑造和满足需求。

文章来源:优设   作者:阿泽与设计

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档