首页

如何构建设计语言系统?

涛涛

什么是设计语言?

设计语言是把设计作为一种“沟通的方式”,在特定的场景中进行内容与信息的传达。设计是介于科学与美学之间的一种艺术,是需要理性的去解决感性的问题。它和艺术之间的差别就在于“解决问题”。

设计语言有哪些?

设计语言最底层是项目设计语言,具有典型特征和主题,比如医疗项目凸显专业冷静,节日项目凸显热闹氛围。往上一层是产品设计语言,强调个性品牌,比如小视频的设计深色更沉浸,电商从结构到色彩都凸显热闹。很多产品随着发展,形成一些系列平台服务,平台设计语言确保服务“统一规范”。最顶层是生态设计语言,跨设备跨平台和硬件呈现的设计语言。

百度直播业务,从单一业务形成系列平台服务,囊括的不只是 B 端和 C 端用户产品,还有 8 大垂类蓬勃发展,以及跨业务多宿主的呈现。庞大的平台业务,特别需要建设平台设计语言。

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言?

所有的设计语言,都是服务于业务顶层战略发展。制定设计策略前,需对业务所在的行业背景、品牌战略、用户群体、流行趋势有充足的认知。当返工无数次还是没方向时,说明以下前四点需要再深入明确。

如何构建设计语言系统?来看百度直播平台的实战案例!

建立设计原则时(设计语言的标准),不妨尝试把品牌战略人格化,由所有人解决所有人问题的愿景,得出产品是一个解决问题的行业专家的身份,Ta 传达的气质是简洁大方的仪表,亲和有力的仪态,和专业权威的素养。

如何构建设计语言系统?来看百度直播平台的实战案例!

设计语言以现代轻奢风格为基调,它大简至美、配色和谐、材质考究,以独具特色的现代格调,构筑起一个充满质感又十分舒适的直播间,给用户一致、友好、有品的体验。

如何构建设计语言系统?来看百度直播平台的实战案例!

设计动手前,按照风格基调具象化拆解分析必不可少,每一个元素的表达手法都要定位清晰。

如何构建设计语言系统?来看百度直播平台的实战案例!

1. 至简 光影艺术图标体系

在图标的设计中,我们基于专业亲和的品牌理念延展出 2 个不同的方向。方案一以直线折纸与光影为视觉元素,呈现一个用心专业的态度。方案二以曲线雕刻艺术展现专业亲和的魅力。

如何构建设计语言系统?来看百度直播平台的实战案例!

图标体系化,多场景验证一致性,发现方案一不够极致,造型复杂;方案二具备良好的一致性,但破坏了物体固有的结构,影响识别度。

如何构建设计语言系统?来看百度直播平台的实战案例!

在一致性的前提下,尝试简化、提高识别度。巧妙的将光影和结构交汇,极简到 2 个图层呈现主体;语义清晰识别度高;角度渐变光影带来舒适亲和感,15°x 角度的精准把控传达专业的品牌特性。因此总结出图标绘制要遵循的法则为识别性、品牌性、愉悦性、一致性。

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

2. 和谐 家族感的色彩体系

a)标准色

初期直播品牌色继承百度 App 品牌色,随着业务逐渐中台化,需要专属直播色。运用色彩心理学传递给人不同的情绪及心理感受,寻找直播的专属色相,而活力、温暖的红色色调,更能体现亲和有力的产品气质。

如何构建设计语言系统?来看百度直播平台的实战案例!

红色也有冷暖之分,此时提高色相、饱和度的颗粒度,H 色相以 350°为起点,以 2°递增或递减,S 饱和度以 5°为阶梯,生成更多色阶(保持相同 B 明度 100),在多界面和真机验证,得出直播专属红(H350 S80 B100),冷暖适中符合平台属性。

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

b)协调的辅助色

同时,运用色环建立辅助色彩体系。H 色相以 350°为起点,以 15°递增或递减标准,创建 24 色相色板(保持相同 B 明度 100、S 饱和度 80);选取柔和与协调的类似色和邻近色作为家族色彩主体,调和互补色与对比色,平衡整体色调。因为不同色相的感官明度并不相同,校正每一个辅助色的 HSB,达到色彩感官上一致。

如何构建设计语言系统?来看百度直播平台的实战案例!

C)调色版

一般会有 2 种方法,一种是使用明度差获得统一性佳的调色板,优点是落地成本低,代码可直接实现;另一种则是微调饱和度和色相,获得鲜明的色板,可使用在插图绘制上。

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

3. 考究 新颖独特材质

亚克力,这种具有透明质感、光学品质的材质,在设计领域最早应用在家居设计上,被互联网设计师熟知是在微软的概念视频里,随之逐渐应用到 icon 绘制上,亚克力 1.0 版本背景和主体层次没拉开,2.0 版本更趋向加大不透明度和模糊值,达到清晰舒适又兼具艺术美感。

如何构建设计语言系统?来看百度直播平台的实战案例!

这种量身打造的稀缺材质运用在运营玩法上,如红包雨玩法,既能凸显平台专业用心的态度,又能强化用户消费行为转化,助力变现增长。

如何构建设计语言系统?来看百度直播平台的实战案例!

用户激励体系,采用 3D 玉石润泽质感+动态折射光影,体现有内涵不张扬的泛知识调性,凸显用户独特身份感

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

写在最后

在每一个小元素的创作中,我们都时刻谨记,无论是项目的主题语言、还是产品的设计语言、甚至是生态的,终点都是传达企业文化以及价值观。从战略层重构业务的认知体系,再将品牌战略人格化,才能够在茫然期产生真正的笃定感,逐步拆解设计目标和构建符合业务气质的设计语言,达到最愉悦的体验。

文章来源:优设 作者:百度MEUX

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

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

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



如何从0-1做后台,七步即可合理的构建后台页面

鹤鹤

因为后台是一个非常广泛的且深奥的东西,里面包含了太多的业务逻辑,而且每个产品面向的用户群体又不同,因此不可能说的面面俱到,但是我提炼的这七个步骤适用于大部分后台的一个宏观方向,对于一个没有后台项目经验的人去从头制作一款后台产品应该是非常有帮助的。





第一步:选择导航板式


导航是后台的主躯干,一切操作都需要在导航的指引下进行切换,目前常用的有两种导航,顶部导航与树状导航。



顶部导航板式


顶部导航是大多数Web端网站使用的导航模式,因为人的阅读视觉是从上往下,从左往右,因此,顶部是视角最先达到的地方,顶部导航可以让用户快速了解整个网站的主要内容结构,通常在营销级官网,内容浏览平台被广泛应用(例如京东,阿里云,站酷...)。


但是其弊端也是很显而易见的,因为屏幕宽度的限制,在小屏下,顶部显示文本内容有限,通常只有几个字符的内容,更多内容或二级标题则需要进行隐藏显示。其次因为人类身体结构,成年人的头颅约为4.5~5.5公斤,占据身体7.7%左右的重量,我们的颈椎承受了太多,因此人在左右扭头时要比上下点头更舒服。再者人类的眼睛是左右排布的,与生俱来两边的视线就优于上下的视线,顶部导航如果需要高频次使用的话会让用户非常的劳累。


优点:节约空间、可以快速吸睛


缺点:显示文本内容有限,不符合人体工程学,不方便查找





树状导航板式


在很多生产力工具上,后台网站上,B端产品上,阅读软件上,树状导航被广泛运用。树状导航是以父子层次结构来组织对象的,其优点非常显著:兼容性强,结构清晰,拓展性强等等。


先说兼容性,因为每条导航标题呈上下排布,因此一排只需显示一条标题,对于长标题与外文适配显得格外的友好。树状导航具有良好的层次关系,每一层内容都可以固定性的展示出来,不会像顶部导航必须鼠标悬浮才会显示子层级,不论是从便于梳理层次关系的角度来讲,还是频繁操作的简单化来说是都是完胜于顶部导航的。因为网页默认是上下滑动来查阅更多内容的,因此树状导航的拓展性方面碾压顶部导航,树状导航可以无限的向下拓展,就像书籍的目录一样,而顶部导航则只能显示寥寥无几的几个单词。


优点:可以展示更多的标题内容、可以不限制标题条数无限拓展、结构清晰易懂


缺点:占据空间较大,对于小屏可能需要频繁展开、收起导航






第二步:统一模块规则


后台的主要功能是支撑前台产品,管理资源,因此在逻辑与结构的梳理上应当与前台产品保持一致性,在布局的制定上应当遵循模块化、响应式、高效化的布局,以便于清晰地传达信息。


在后台的布局中,通常需要将数据统计、展示与列表、操作区分开来,达到看归看,做归做的原则,如果混淆到一起就会大大的提升认知难度和操作难度, 就像老款的汽车的仪表盘与中控操作区分开来,用户就会很快的上手,但是像特斯拉都集成在一块屏幕上就会让用户傻傻分不清楚,一时间难以找到相应的操作区域。因此模块化在后台则显得格外重要,每个模块、每个区域都应当赋予它独特且自始至终不变的属性,比如顶部的导航条,全局都在顶部区域展示,而不是这个页面在顶部,下个页面在底部。



导航模块:


后台的布局中,常用的模块就是导航模块(整个后台功能的结构提纲),总导航就是我在上文提到的两种,顶部导航和树桩导航,其他还有二级导航,面包屑导航等等,但是需要注意的是,导航就像路标,起到指引用户的作用,因此在全局的样式与位置应保持统一。





提醒模块:


顾名思义就是提示用户有新的消息,新的功能等等,提醒模块十分重要,因为它是实时性的,在设计提醒模块时应当遵循全局化、机动化,高亮化,动态化的规则,在常规状态下,提醒模块应该隐藏展示,不过多的打扰用户,但是如果在需要出现时,不论用户处于什么样的场景,提醒模块都应该在第一时间出现,并以醒目的方式告知用户。





数据统计模块:


数据统计通常是作为后台页面头部的存在,用户一进网站映入眼帘的就是整个产品或者整个项目的数据统计,数据是作为衡量某一件事情好坏的重要标准,数据也通常可以说明一个决策、一项任务的最终结果,在数据统计模块的设计上应该保持直观,一针见血的设计方式,比如股票的K线图,红涨绿跌,一目了然。





快捷操作模块:


有许多使用频次非常高的功能可能会贯穿全局,比如谷歌Email,不论在哪个页面,日期、Task功能都会在右侧进行显示,方便用户随时添加待办,记笔记等等。在后台中,有很多时候一个小工具就可以提升很大的效率,不必在来回切换软件、页面,有很多情况下,我们看到了一个东西,联想起了某一件事情,打算记录下来,但是退出这个页面再去打开记事本的时候发现已经忘记了(这该死的7秒记忆)。因此在有些情况下,缩短操作路径是一个不错的选择,而快捷操作模块也同样要遵循全局固定位置,不可随意变动的原则,如果违背,效果往往会适得其反。





内容展示模块:


信息展示,这个模块应该是最难搞定的了,不管是什么页面,信息都是重中之重,没有信息的页面那和没有肉的肉夹馍一样。内容展示模块不同于以上的模块是全局静止的,内容展示模块承载了后台95%以上的页面量,每一个页面都不同。因为后台页面大部分时间都是以电脑端网页的形式呈现,人在看电脑时通常会和显示器之间有30-50cm的距离,甚至可能更远,因此在内容的展示模块上应当给予友善的设计,比如加大文字之间的字间距,行间距,突出重要信息,以图文并茂的形式将枯燥的信息情趣化,没有内容的模块放置缺省提示图。





操作模块:


操作模块通常是与内容展示模块共同存在的,两者互相配合使用,凡是在页面中涉及到可以点击交互的区域统称为操作模块,操作模块应该全局统一视觉语言以及操作语言,比如,按钮样式及大小,开关样式,分页器摆放位置及样式等等。所有的操作模块表意性要强,让用户可以快速明白点击后的结果,如果遇到难以理解的操作功能,应该配合图标使用并给予操作引导。



编辑模块:


编辑模块就是通常说的表单填写页,编辑模块拥有新建,上传,输入,选择一系列的交互方式,其目的是为了让用户录入信息内容,因此在编辑模块的设计中应该按照相对应的前台项目理清顺序,从头至尾合理引导,引导语尽量简短并阐明要义。在操作的过程中,应当给予用户清晰、及时的反馈,并给予用户返回、撤销、清空、保存等操作。在表单的设计中,尽量将信息进行单行纵向排列,每一条信息各占一行,并保持信息对齐方式一致,保证用户视线流畅舒适。






第三步:统一操作/交互方式


电脑端常见的操作方式:



1.左键单击


鼠标单击是指鼠标点击UI控件后释放点击的一种交互行为,在整个过程中,用户点击和释放的坐标点是一致的,不可有移动的行为,点击是建立在悬浮动作之后的。左键单击是最常用的PC端交互方式,其作用是触发某一操作,整个页面由很多链接、控件组成,而鼠标单击则是触发这些可被操作的控件。




2.鼠标悬浮


Hover就是我们通常说的鼠标悬浮,当用户用鼠标指针移过UI控件时,UI控件给予的反馈效果就是悬浮交互方式。悬浮的主要功能是「拓展」与「指示」。在很多情况下,我们的屏幕无法将更多的信息进行展示时,通常会将众多功能收纳至一个控件当中,而鼠标悬浮则会触发控件将其隐藏的功能进行显示。鼠标悬浮的指示意义是为了让我们更好的理解控件的属性并提供及时反馈,比如将鼠标悬浮在文字上,鼠标会变成工字梁,将鼠标悬浮在可点击的控件上会变成小手表示可操作,悬浮至不可点击控件上会变成问号等等。


在实际的设计当中,我们可以为鼠标悬浮赋予更多的可能性,鼠标悬浮可以将未完全展示的文字进行展示,也可以对收纳起的功能进行展示,还可以进行许多快捷预览等等,但是鼠标悬浮最重要的功能则是为用户提供交互行为时的「及时反馈」。




3.右键单击


自从计算机操作系统诞生后就为右键赋予了「系统菜单」的交互意义,在不同的场景下点击右键所出现的内容是不一样的,这取决与网页与应用的开发者,在网页的设计中,将常用的快捷操作写入右键菜单,会极大的提升工作效率,因为右键的菜单弹窗始终在鼠标指针附近触发,因此对于用户寻找功能是非常友善的,但是需要注意的是右键的操作应该全局统一,在同一套产品中,右键的内容不应该出现过多的功能,否则会对使用者造成困扰。




4.拖拽


拖拽,顾名思义就是鼠标单击某一文件不放进行拖拽,拖拽操作相对与其他交互更具有操作感,因此在设计拖拽时,动画是一个必要的选择,动画是表现交互给予反馈最直观最有趣的选择,拖拽的动画最基础的表现为被拖拽对象跟随鼠标进行位移,而且松开鼠标后,文件的最终归属位置。拖拽常用与复制、移动顺序、上传、下载文件的场景,相对与普通的多步骤点击操作,拖拽所反馈的定位更加明确,可以大大缩短寻找目录、寻找文件的时间。





第四步:制定布局体系


布局框架是一套产品的骨架和基础。只有在框架确定之后,设计师才可进行下一步的构建统一的视觉元素,清晰的功能操作,具体的交互流程等等。后台产品是一个庞大的体系,除了对应前台产品的功能之外,还包括对产品部门的管理,产品相关的功能管理,不同身份对应的权限管理等等,因此太过单一的布局形式并不能适用,因此我们在设计后台布局时应该遵循简约化、统一化、规范化、拓展性强的原则。


对于拥有着众多功能的后台,我们应该做到化繁为简,多而不乱,如果想做到这一点我们就应该参考《简约至上》一书中所说的简约四要素:删除、组织、隐藏、转移。



删除


在iPhone的外观设计上,乔帮主一直信仰「少即是多」,就是我们通常说的做减法,这一伟大信仰在苹果公司的产品上完美的体现了出来了,苹果不论是线下门店还是官网、硬件、系统等等都将一切简约到了极致。用在我们的产品布局上,删除就是将无用、重复的功能删除,保留必要的功能,不要将和业务与用户使用功能完全不相干的东西放在页面上。



组织


组织的作用就是把业务相关的元素放一起,分个类,让用户可以更容易理解,比如有众多的水果蔬菜,将水果放在一个篮子,将蔬菜放置在另一个篮子要比它们都混合放在一起更容易辨认、查找。


人类喜欢规划一切,喜欢井井有条的秩序,组织就是规划,将整个页面众多的元素进行规划分类,把相关联的元素模块化,每个模块之间应该做好分割,分割包括:留白分割,分割线分割,模块分割,Tab点击分割,分割强度级从左至右越来越高。要注意的一点是组织存在争议性,有的人他认为番茄归类为水果,而有的人认为番茄应该归类为蔬菜,这辩论起来双方似乎都有道理,所以在设计中,组织元素时应该细细斟酌,对于这种墙头草类型的功能,应该谨慎处理,在了解用户心智之后再做定义。




隐藏


隐藏是一种并不快捷的简约化的方案,隐藏通常是将使用频次低的功能藏起来,等需要时再手动调出使用,这些功能不常用但也并不代表没用,比如设置头像、名称等等,隐藏可以让页面在视觉上更加轻量化,毕竟有限的空间还是要留给更重要的功能。




转移


我们上学时做题,当看到一道应用题有足足几百字,那我们下意识的想法就是,这题™的太难了,虽然还没有开始思考。但是人们的潜意识就是对看似复杂的东西排斥。在诺基亚还处在全键盘的时候,Android机还有三大金刚键的时候,iPhone就已经简约到了只保留home键、音量键和开机键,那么iPhone把其他所有的功能键都移除了,真的操作起来就简约了吗,按照复杂度守恒定律来说并没没有,复杂依旧存在,只不过是将原本学习按钮的过程转移到了去屏幕里交互的过程,但是这样子更容易被人所接受,因为是对复杂进行了分步引导操作,就像跑马拉松,如果你目标想着跑完全程,那么你多半半路就废了,但是如果你把目标变成每5公里为一段,分为八个小目标那么你可以很轻松坚持到终点,这就是一种魔力,因为每个人都不喜欢把自己搞得很累。回归至设计当中,后台是一个复杂的系统,功能可能多到眼花缭乱,但是如果将很多的步骤的一个流程分为众多小步骤去合理引导,那么是否会更加的易于理解、便于操作呢,这就是转移的用法。





动静态化布局


在制作后台时,我们应该遵循模块化布局,并提前规划好静态模块与动态模块。比如导航模块、面包屑、按钮等这些组件,在全局的位置应该保持一致,这些就是静态模块,全局样式与位置上不会出现过多变化。而动态模块一般就是内容区域,因为业务与功能的不同,内容模块所展示的内容是一定不同的,这一块的内容则是需要变化的。提前规划静态与动态的布局在开发方面可以节省代码量与开发成本,开发只需要将静态模块写成固定的组件就可以达到全局复用,快速修改的效果,在用户方面也可以大大的节省用户的学习成本,因为用户在学习了静态模块之后,之后则只需要再去学习动态模块就可以,而不需要每个页面、每个组件都要去进行学习。




响应式布局


因为后台大多数情况都是在Pc端与Pad端使用,这两个终端的屏幕没有固定的尺寸,可能有4k屏,可能有1k屏,当然还有可能是笔记本电脑所使用的更小尺寸,因此在设计时不能使用固定的设计稿尺寸,而应该使用较小的横屏设计尺寸进行设计,最早的屏幕分辨率低,通常都是使用900px~1100px的尺寸作为设计稿尺寸,但是随着科技的发展,目前市面上的屏幕最低都是1080p的屏幕了,因此在设计时可以使用横向「1200px」与「1440px」的尺寸作为设计稿尺寸,最大不应该超过1600px的尺寸。




定好尺寸之后,在设计时我们应该以响应式布局的思维去设计,什么是响应式布局,通俗说就是在屏幕变大的同时,页面内容会跟随屏幕的变大而展示更多的内容,需要注意的是:在屏幕变大的过程中,页面的内容应该只会出现信息数量的变化与信息之间距离的变化,不应该出现元素尺寸放大。在目前的设计中很多设计师喜欢使用栅格的设计方法,栅格布局具有易响应、设计规范化等优点,缺点就是可能会束缚设计师的发挥,在制作页面时完全按照制定的栅格走,缺少了灵动的感觉。虽然不见得要使用栅格布局法进行设计,但是我们要了解栅格的原理,要使用栅格的思维去制作。


栅格就是将页面划分为不等的几个模块,可以是12个模块,也可以是24个等等,每个模块之间的间距使用固定的距离,叫做水槽,可以将这些模块看做是参考线,水槽内就是禁止区,我们在设计时,将内容设计在模块内,用水槽作为模块之间的间距与留白使用,水槽只作为留白区域,不可以放置任何元素,最终开发时,响应式布局就是将模尺寸块随着屏幕宽度的变化而变化,而水槽则不动,如果屏幕变窄,不足以放下一个模块时,这是则将模块下移至第二行,水槽依然是不变的。







懂得了水槽的原理,那么我们设计的时候就算不用固定的栅格方式去制作,页面也不会出现太大的错误。


看懂了栅格之后总结一下,这不就是说一个模块一个模块的去设计么。没错,在设计时我们就是将元素按模块进行设计,这里说的模块不单单是指灰背景与白色块这样的组合,元素之间使用排版四要素中的亲密也可以哦,只要是视觉上看起来是一块一块的,就算没有分割线、分割块它依然算是一个模块。


回到了响应式布局,当我们按模块进行设计后,那么响应式布局就是毛毛雨了,开发只需要在屏幕尺寸变宽的时候将模块之间的距离拉大就可以了,这时就不是设计该去管的事情了。


总而言之就是,遵循响应式布局的目的就是为了屏幕尺寸在不断变化的同时,不会去影响改变内容的整体观感与体验,不会出现图片拉伸,字体忽大忽小的情况。



间距


间距这个东西真是老生常谈的事了,其实也没什么太多说的,但是这里还是去大致说下,什么样的间距比较合理,视觉上看起来比较舒服。


屏幕的分辨率都是以偶数为主,1600*900、1920*1080、2560*1440等等,因此我们在使用间距的时候最好使用偶数作为最小基数,然后其他间距以最小基数的倍数去制定,比如你最初制定的最小基数为2px,那么整套页面的最小间距就使用2px,接着随着间距的增大,就以2的偶数倍作为其他间距,比如2*2=4px、2*4=8px、2*8=16px等等,这样做页面不仅看起来比较规范,而且易于开发,易于记忆,不容易出现锯齿。




因为我们的后台产品通常是在电脑屏幕上使用的,电脑屏幕距离人眼的距离相对于手机较远,而且后台产品业务种类繁多,功能错综复杂,因此元素之间并不太适合过度拥挤,否则阅读起来就像报纸一样,难以辨认,效率低下。而过大的留白又会导致展示的信息量少,出现信息密度不足的情况,同样会导致阅读效率下降,因此在间距上我们应该取中度,这个中度的标准就是将一个24寸的显示器放在距离眼睛50cm的地方,然后去看这个页面的间距,两个元素看起来刚好不会很拥挤的时候,差不多就是刚刚好的,为什么使用24寸的显示器呢,因为24寸的显示器市场占有率较高,也是在日常环境中眼睛视线范围内看起来比较舒服的尺寸,比24存再小的显示器大多数就是笔记本屏幕了。


元素之间的科学距离通常使用等分原则与五分原则,就是同一模块的元素距离使用a,不同模块之间的距离则使用2a。





总结一下就是层级相同的模块之间保持相同的间距(等分原则),层级不同的模块保持不同的间距(五分原则)。



场景驱动间距


场景驱动间距,听起来有点不易理解,其实是so easy的,举个例子,当你要去一个陌生的停车场找自己的车,你又不知道你车放哪的时候,这时,你最希望的就是来一架无人机,从航拍的角度去看所有车辆,然后看哪个像自己的车,在做决定。当你找到你的车了,你要看看你车有没有被剐蹭,油还多不多了,你就需要放下无人机,走到车前仔细观看,而这时,整个停车场的布局什么的对你就没什么太大意义了。


这回应该很好理解了吧,找车就是信息检索,找到车了进去看车里有木有油就是内容阅读。信息检索,通常在后台以列表的形式存在,且常常配合检索功能(搜索、筛选、排序)等,这时检索出的信息密度一定要大,因为用户需要在大密度信息中快速浏览,找到符合自己的东西,假如你要是在淘宝搜索一个袜子,结果一屏就显示一条,你要浏览时,你还要来回翻页,你是否会很崩溃呢?


而筛选出的内容,这条内容就是用户千挑万选出来属于他的精华,他会仔细查看这个信息的详情,这时,我们要做的就是将留白加大,字间距加大,字号加大,让他很舒服的把这个信息阅读完成。还是上个例子,你淘宝搜索到了袜子,你要看看它的颜色,布料材质,穿上臭不臭等,这时袜子的的详情页信息比报纸还要拥挤,还需要你用放大镜才能看清,这时,你是否再次奔溃了呢。然后就直接关闭淘宝,前往京东查看了。。。




说了这么多就是,用户在进行信息检索时需要将间距适当调小,在保证有效阅读的条件下,尽量在一屏内显示更多的内容,当用户筛选完成准备阅读内容时,我们就要放大间距,最大的保证阅读的舒适性。这只是其中的一条小例子,场景可能千千万,这就需要设计师自己动脑去思考,去模拟了。




第五步:制定色彩体系


上帝说:要有光!!而颜色就是我们对光产生的视觉效应,目前我们肉眼可见的颜色大约是100多万种,那么这么多种颜色,选什么色作为主要的色彩使用在页面上呢,其实很简单,这么多颜色,我们只需要把色彩大致的分成:赤橙黄绿青蓝紫这7个颜色就可以了,毕竟人类更注重的是全局观,一个颜色,你稍微深一点,稍微浅一点,99%人都分辨不出来,毕竟大多数男性连口红色都分辨不出来呢。


在色彩中,色彩有三个属性:色相、明度、饱和度,这三个属性只要我们了解了原理就可以手动调色了,有人说,手调的不准确,不科学,那么如果你会写色彩的算法,请略过此处,普通人还是手动调调比较好,因为,只要是掌握了色彩心理学,色感别太差,全局色彩统一,对于中小公司完全可用。


调色怎么调呢,第一看色相,色相决定的色彩的大方向,那么色相条中这么多颜色,用那个色相范围好呢,这个就要看色彩心里学了,通常我们看到红色想起什么?五星红旗、党、激情、慷慨激昂、股票大涨,那老外看到红色呢,血腥、暴力、闹鬼了,同样一个红色,咋国内外差距这么大呢,这要说的就多了,毕竟是历史遗留问题,政治问题,生活传统问题等等,具体请参考度娘。。。除了红色,还有橙黄绿青蓝紫六种颜色呢,当你看到其他的颜色你想到什么,那这就是色彩心理,因为你什么都没干,就看个颜色就能脑补各种东西,有了各种感觉,色彩是不很神奇,没错就是很神奇,不同的色彩对于不同的地域的人群,不同职业的人群,不同年龄的人群都会有不同的色彩心里,这个具体就不细说了,知乎,百度一大堆相关研究。而我们要做的就是根据你的业务属性和面对的相关人群,使用他们的色彩心里去制定你的色相,要是面对医疗行业,可能绿色是个不错的选择,如果要是面对政府行业,或许红色更讨领导们喜欢。




确定好色相范围了,那么接下来我们就需要再考虑考虑饱和度问题了,饱和度是什么,爱修图的女性朋友一定知道,色彩的饱和度越高,那颜色越鲜艳,饱和度越低,色彩越枯燥,饱和度为0,嗯没错,50年前的电视机就没有饱和度。在制定颜色的时候,饱和度往往决定了年龄属性,一般年龄偏大的人不喜欢那花里胡哨的鲜艳,更喜欢柔和中性的颜色,年轻人更喜欢炫酷潮流的高饱和颜色,这么一说你们应该就恍然大悟了吧,年龄高的人群用低保和,年龄低的人用高饱和,对,也不全对,饱和度不只是和年龄挂钩,也和产品的属性挂钩,就像兰州拉面的门头看上去貌似有点low,但是看苹果的门头,觉得好像挺高端,为什么呢,因为过重的饱和度给人亲近感,但是相对来说就少了高级感,低保和俗称性冷淡风,给你一种高级感,比如莫兰迪色,饱和度较低的颜色会给人高级感,但会显得不近人情,饱和度较高给人廉价感,但是更亲民一些。


至于明度,就是颜色的亮度了,当你调完色相和饱和度时,发现这个颜色貌似有点刺眼,那么你就把亮度调低点,如果发现有点看不清,那么你就把明度调高点,明度就是这样子使用的吧~~~~




在使用颜色的同时还需要注意可视度,过浅颜色的按钮放上白色的字,眼神不好是看不清的,具体对比度什么样才算合理,请参考WCAG标准,能通过这个标准的,在可访问性上就没问题。



颜色舒适性


后台,大部分情况是企业自己用,或者给客户的幕后人员使用,相对于品牌色来说或许更在乎颜色的舒适性,红色波长,通常用作警示,所以看起来就比较刺眼,蓝色紫色波短,看起来就相对柔和,后台也许是很多人日常高频使用的工具,因此在舒适度上尽量要完美,舒适度包括较大的交互区域,合理的间距,基于人类视线的合理排版等等,这里我们只说颜色,不同人对于颜色的感知是不同的,但是基于色彩心理来讲,蓝色给人冷静理智安逸的感觉,因此,在大多数的后台产品当中,蓝色作为主题色的居多。


最终总结一下,不管是选择什么颜色作为主题色,一定要保证不能刺眼,否则对于长时间使用的操作者来说会是一个灾难性的问题,可能轻者视疲劳,重者干眼症青光眼。。。再者饱和度尽量不要过高,饱和度为:100是绝对不可以的,因为过于炫目的颜色会激起使用者的负面情绪,引起焦躁和不安的情绪,因此过高的饱和不可取。




第五步:制定文字体系


文字,是我们记录信息的主要工具,在后台页面的设计中,我们不需要对字形进行设计,只需要使用Web端常用的标准字体就可以。


文字还有许多其他的属性,合理运用属性可以大幅的提高文字的阅读效率。后台的元素较为简约朴素,以文字为主,较少的图形作为辅助元素,在整屏页面的元素中,文字占据了大多数,那么如何体现出哪些信息重要,哪些信息次要,这时文字的字重属性与字体尺寸属性就可以完美的帮我们解决这个问题。字重越重的字越有力量感,辨认度越高,视觉重点越高,字重越轻的字体,给人文艺典雅高端的感觉,后台算是B端产品,应该是不大需要高端文艺的感觉的,引导视觉与可读性更重要一些,因此我们常规下就使用标准Regular字重就可以,再轻的字体阅读起来比较费劲就没必要再去使用了,而像标题、主文案、按钮这些文字,我们可以使用更重的字体与更大的尺寸来突出,将重点信息的层级拉开,引起用户的视觉注意。




当整页的阅读信息较多时,我们需注意将文字适当放大,正常情况下网页的文字为14px,但是在大篇幅的连贯性文字出现时,我们应该将文字的尺寸合理升至16px或者18px的大小,在行间距与字间距上也应该适当加大,那么行间距(行高)为多少比较适合呢,正常情况下我们使用sketch自带的行高就可以,对于文字信息较多的情况下,我们使用1.2-1.8倍的行高就比较容易阅读,在以阅读为主的页面中,比如文章阅读页、文档页这些情景下,使用1.5-2.5倍的行距更好,有人会说1.5倍间距就已经很大了,其实不然,当你在长时间阅读信息的时候,越到后面阅读效率越低,那么超大的行距可以有效缓解阅读疲劳感,在长时间阅读的情况下也可以避免串行的问题发生。




字体颜色也是一个需要注意的地方,通常我们为了便于记忆,使用灰度色就可以,一般色值为#222222、#333333、#666666、#999999、#CCCCCC这些,在一个页面中,正文文字的颜色不应该超过3种色值,通常为一个标题色,一个文本色,一个辅助色,高亮色另说。颜色的使用主要目的是为了凸显信息,过多的使用颜色会给用户造成有很多层级的错觉,导致层级混淆,页面混乱。




第六步:提升趣味度


当后台产品的结构与信息元素全部排版完成后,这时我们会发现,整个页面除了文字和按钮貌似没有什么其他的东西了,确实,我们作为一个开发人员看起来都倍觉单调,更不用说每天使用我们产品的用户了,更是枯燥的要死。有人说,B端产品以效率为主,本身不就是枯燥的文字嘛,道理是这么个道理,但是作为开发人员,让用户使用的开心也是我们的一个任务,俗言道:一图胜千言,假如我们要学习一段历史,我相信比起来看书本上的文字,看电视剧的方式应该更受人青睐吧,谁都不喜欢全是文字的东西,客户也是一样的,因此我们应该对页面进行适当修饰,不应该把页面做成一个txt的文本文件。那么怎么去合理的修饰页面呢,很简单,图表化、图形化。


什么是图表化,简单解释来说就是将有规律的数据进行分类总结,用适合此类数据的图表进行展示,举个简单的例子,狗蛋想要去买股票,但是不知道买哪一只,于是想上网查一查最近5年每个公司的股票走势,结果找到了两份文件,一个是满是文字的数据列表文档,另一个是精美直观的K线图,那么你是狗蛋你会阅读哪个呢,当然去看k线图了,毕竟3秒钟就能知道个大概,如果看数据报表,眼花不说,一上午都不见得能阅读完。这时你就会发现图表的魅力。




那么图形化又是什么呢,依然很简单,就是将固定不变得字段图标化,将难以理解的字段插画化。人天生对于图形的识别能力就优于文字,对那些静态的字段给与图标的展示会大大提高用户的识别效率,什么是静态的字段呢?比如固定的按钮、导航、目录、设置等等,全局都长那样,不会因为切换场景而改变文字,这些就非常适合使用文字与图标相互配合来提升趣味度与辨识度了。




那么插画化又是什么呢?说白了就是将用户懒得看的那些字配张图,读书时我们的课本都是图文并茂的,那教育部就是怕学生光看文字产生厌倦导致不好好学习。同样的道理,有很多情况下,用户也懒的看文字,比如升级页,升级功能信息那么多字,不如多放几张图来的实在,这也就是那些APP产品为什么都有引导页的原因。





第七步:合理引导


当你看到这一步的时候,说明你的后台已经完成的差不多了,后台是个极其复杂的系统,一个新手去学习使用一套后台就像一个菜鸟去学习玩一款新游戏一样,只不过游戏有我们的兴趣驱动,兴趣是最好的老师,而后台则不同了,学习使用后台的那都是为了工作,兴趣可就没那么强了,如果恰恰碰到了做的很复杂的后台,那客户可能当场崩溃,古有唐雎之怒,流血五步,今有员工之怒,当场跑路,没准产品学不会,人家就辞职了。想想都觉得很严重,这时就体现出了合理引导的重要性,那么什么叫做合理引导呢?引导分为很多种,有新手引导、新功能引导、版本变更引导,操作流程引导等等,但是最终的目的是为了让用户快速学会使用你的产品。



新手引导:


可以使用视频教学,文字教学,体验教学等等,具体怎么使用应该根据自身的业务进行分析,看看适合用哪种的方法。




新功能引导:


要多提示,可以是红点提示,高亮提示,弹窗提示等,这块的主要目的就是:要将新功能在什么位置、有什么功能告知用户,别你功能去年就更新了,用户今年还不知道呢~,这就尴尬了。




版本变更引导:


每个版本交互设计师,产品经理,体验设计团队等等一大堆人去探讨,将旧版本不合理的功能升级,去除,换位置,合并等等,每动一点,用户都需要从新学习,因此当版本变更导致操作习惯和之前不同时就要提示用户最新的版本内容,最重要的是要对比引导,旧版本怎么回事,新版本怎么回事,在这一块可供参考的有很多,如Adobe全家桶每年的大版本更新,Autodesk全家桶的大版本更新,游戏的大版本更新等等,他们甚至还会出一个专门的文档来描述新旧版本更新对比。





操作流程引导:


顾名思义就是引导用户完成某一套操作流程,就像LOL里,刚注册游戏时,系统会引导你完成一局游戏,告诉你该点击哪里进行匹配,点击哪里选英雄等等,这种引导通常是让用户在真实场景下边操作边引导,纸上得来终觉浅,须知此事要躬行嘛,身临其境的体验才是快速学习的王道,这种的引导非常适用于操作步骤繁琐的产品。



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

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

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

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


导航栏 Navigation Bar 的设计方法

涛涛

导航栏(Navigation Bar)作为一个基础控件,极高的复用率和看似单调的设计样式,往往会让人习惯性忽略其中隐藏的诸多细节,以及背后的设计原因。本篇文章主要探讨导航栏视觉和交互上的各种组合可能性和相关设计细节点,希望能提炼出一般性的设计规律。观点仅是个人粗浅的分析,如果有哪里说得不对的地方,希望大家多多指点。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

理解导航栏的作用

导航栏是用来帮助用户定位、导航、操作的基础组件。既负责告知用户当前所在位置,防止迷失,又负责连通页面跳转路径,允许用户在不同层级的界面之间来去自如。同时还承载了针对当前页面全局性的操作。

简要概述导航栏的作用,有以下 6 个:

  1. 定位:告知用户当前所在位置
  2. 导航:提供离开当前页面的出口,即返回上级(适用于非一级页面)
  3. 提供全局操作:一般是以图标、文字、按钮或组合的形式存在
  4. 扁平层级:以分类 tab 为代表,本质是将多个相关的同级页面聚合在一起
  5. 增加品牌曝光:一般放置在首页左上角
  6. 解释页面当前状态:属于瞬时状态,动态变化

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

梳理导航栏常见的布局方式

实际上,导航栏的布局方式非常丰富,除了上文提到的几种基础布局之外,还有许多复杂的布局方式。

不同的布局方式体现了不同页面的信息架构。

为了方便描述,我将导航栏可以放置信息的部分划分为左、中、右三个区域。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

接下来,我将从「结构简单」到「结构复杂」的顺序来讨论导航栏的各种布局方式。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

突出视觉重点的 4 种设计策略

视觉服务于功能,不同视觉权重背后对应的是不同功能权重。以搜索功能为例,不同产品、不同场景下,搜索功能的权重都是不同的。对于电商产品来说,首页搜索是非常关键的流量入口,必须足够突出,减少用户的认知和操作负担,使用户更加顺畅高效地使用产品。而对于不同产品或不同场景来说,搜索的优先级就未必有这么高。

提升视觉权重的本质是将重要信息和次要信息「区分」开来,而建立区分的本质则是「建立对比」。

我们以“搜索”功能为例。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

拆解视觉细节

我们从以下几个方面来拆解导航栏:

  1. 标题样式
  2. tab 样式
  3. 控件样式
  4. 背景样式

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

整理交互细节

首先,我们要了解,页面固有的层级结构决定了某些信息是常驻于屏幕的,另外的信息是随着用户竖直方向滑动手势而滚动的。而导航栏绝大多数情况下是常驻于页面顶部的。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

尽管导航栏一般都是常驻于页面顶部,但仍有不同的情况要分类讨论:

  1. 常驻区域无变化:导航栏不会随着用户手势的滑动而发生变化。
  2. 常驻区域有变化:导航栏会随着用户手势的滑动而发生变化。

首先要明确,哪些内容属于常驻内容。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

上方这种情况比较明显,头部区域是常驻区域,但要注意并不包括四个主图标。

我们再来看下面的案例。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

上述变化的本质是从「状态 a」过渡到「状态 b」。

状态 b 决定了常驻于屏幕的元素数量,这和内容层显示效率息息相关,需要在页面设计之初就考虑好。

确定好了「常驻区域」和「被折叠区域」之后的交互就比较简单,直接折叠相应内容即可。

使用这种「状态过渡」的思路,相当于明确了变化的起点和终点,之后就可以将精力投入在如何使两种状态之间的过渡更加自然。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

当我们确定了「过渡变量」之后,我们只需要考虑如何安排变量如何入场(进入状态 b)。变量的出场(撤出状态 a)并不需要考虑,因为变量是跟随内容层一齐滚动的,自然会被上层的导航栏遮挡。

上方微信读书的案例用了硬切的方式,过渡变量直接出现在状态 b 中。通过观察 iOS14 的信息,我们不难发现,iOS 系统采用的标题栏过渡方式是渐现。本质上没有区别,细节上,渐现相对于硬切更加柔和丝滑。

结语

以上是我个人对导航栏相关的一些整理和总结。

分别从功能作用、布局样式、如何突出重点、视觉细节、交互细节几个层面梳理了导航栏设计策略和设计思考。基础且复用率极高的控件蕴含了许多细节和门道,通过大量细致观察总结出一般性的规律,希望我的文章能帮助大家看到一些平时可能会忽略的细节。

文章来源:优设 作者:设计师doo
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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




案例锦囊|交互设计中「情感化」设计优秀案例(二)

seo达人


1.  本能层 —— 感官刺激

对于本能层,设计师需要在符合功能需求的前提下,尽可能的给用户带来听觉、视觉、触觉的感官刺激,极力去促成用户与产品的 “一见钟情”。

 

案例 1  App Store 的卡片推荐做的很有新意,比如:把吉祥物(品牌形象)是小熊的工具收集到了一起,并取名为:熊帮手。

图片

 

案例 2  微博长按点赞按钮,可以选择不同的点赞状态。图标还是动态的,很有趣。

图片

 

案例 3  淘宝双十一预热,首页的 icon 变成了 “今晚 20 点双 11 抢预售”的字样,烘托氛围又打了广告。

图片

 

案例 4  微信拨打语音的界面,在等待好友接听的过程中,可以看到好友朋友圈的图片,缓解用户等待时的无聊,也为即将进行的语音聊天提供了话题。

图片

 

2. 行为层 —— 细节引导

对于行为层,设计师需对用户的行为进行预判和引导,利用细节处理打动用户,让用户对产品产生信任感和依赖感。

 

案例 1  :当苹果公司发现用户最近在官方渠道购买了新的 iPhone ,老 iPhone 的设置页面就会给出提示,让用户为新的 iPhone 做好数据迁移准备。

图片

 

案例 2  iOS 系统后台在看缩略效果时,会将用户的敏感、私密的信息的 App 页面进行模糊处理,保护用户的隐私安全。

图片

 

案例 3  :在屏幕很暗的情况下,打开微信支付二维码,屏幕会瞬间亮起,便于商家扫码付款。

图片

 

案例 4  货拉拉在展示搬家车辆详细信息时,使用了剖面图,并模拟了不同搬家场景下的家具内容,让用户更好估算车辆空间。

图片

 

3. 反思层 —— 认知共鸣

对于反思层,设计师要调动用户最深层的记忆和感知,将视觉效果、产品功能和用户认知紧密结合,形成用户对于产品和品牌的深刻认知。

 

案例 1  FigJam 是一款来自 Figma 的多人协作在线白板工具,可以进行头脑风暴、绘制流程、多人协同标记等。里面也有很多人性化的小功能,比如:当两个人同时长按 “H” 键时,就会出现 highfive(击掌的动效),非常适合当设计师达成共识时使用:

图片

 

案例 2  小睡眠 App 发现学生时代的我们经常会在枯燥的课堂上睡觉,所以准备了各种课堂讲解、校长发言、领导开会的声音作为催眠、助眠的音乐,让人会心一笑。

图片

 

案例 3  饿了么在异常天气下通过在界面上增加天气的元素,让用户看到外卖小哥的辛苦,使用视觉和内容共情,唤起用户的同理心,降低用户因外卖迟到而做的投诉和差评。

图片

 

案例 4  QQ音乐上线了宠物功能,一共有五个品种的宠物让用户可以选择领取,多听歌能喂饱宠物,然后送它出去参加演唱会或者和好友进行互动。

图片

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》案例锦囊|交互设计中「情感化」设计优秀案例(二)

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

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

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

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


设计的「七宗罪」

seo达人

一、差不多主义

差不多主义:凡事都觉得差不多就行了,不是特别注重设计细节。

如果每个部门都是“差不多主义”,我来给你算一下最终实现的产品会变成什么样(我们就按还原度80%来算)。产品 → 交互 80%,交互 → UI 80%,UI → 研发 80%,最后则:80% x 80% x 80%=51.2%,最后实现的只有预期的 50% 左右,这个产品还怎么用?

图片

每个设计师都要成为“处女座”像素眼,如果你只是为了想快速完成工作而搞出粗制滥造的设计,你的价值也很难体现出来。而且现在互联网已经发展的比较成熟,很多产品差异化并没有很大,如果你连细节都处理不好,要你何用?要在有限的时间内做出更精细的产品,打造完美产品,拒绝粗制滥造。

而且近几年很多公司对【产品体验】越来越重视,比如我司就把前端部门改名为体验技术部,旨在全员打造高质量、优体验、重设计的产品。研发都注重体验了,你再“差不多”就真的差多了~

同时,有的设计师不善言辞,在对接需求或设计澄清的时候不会坚持自己的想法,有时候就算自己是对的,也会在其他人强势的情况下败下阵来。所以作为设计师一定要敢于力争,强大的沟通能力也是职场晋升的一个重要表现。

 

二、拿来主义

抄袭:你直接叫我名得了。

开始之前我们要区分一下抄袭和借鉴的含义。我专门查了下词典,根据《现代汉语词典》的解释:抄袭是把别人的文章、作品私自照抄作为自己的去发表,并且实质性相似;借鉴是与别的人或事相对照,以便取长补短或吸取教训。区别在于前者是“照样抄录”,后者是“参考仿照”。

把借鉴当做寻找灵感对任何设计师来说都是一个自然的过程。

学过美术的都知道,画画前期都是需要临摹的,这个就是借鉴、学习的过程,如果你拿临摹的画去商用,那肯定会被打~

我们经常做的竞品调研就是借鉴的过程,去了解竞对都有哪些值得学习的地方,哪些地方做的不好不适合我们,我们可以创新的。

不要直接把竞对的产品拿过来抄,一些初级产品经理就会经常这么干,看竞对有什么,他们就抄;竞对是怎么处理了,他们就怎么处理。永远跟不上市场的脚步,别人都产品化了你才开始搞,吃屎都赶不上热的~

图片

设计真的很辛苦,我们可以把别人的作品作为“日常练习”,去从中学习原作者是如何思考、设计的。如果你拿他做除学习外的任何其他用途,都是不允许的。

其实设计已经发展到了几乎不可能 100% 原创的时代,我们就是要把所学所见混在一起,创造出一些新的设计。解决方案永远不止一个,思维够活跃,就有千万种可能。

图片

在数字时代,你拿别人的设计搞事情,是藏不住的,我平时发一些“曝光抄袭类”文章的时候,浏览量比平时都要高很多,大家对抄袭还是很关注的。

平时我在面试的时候,如果你是“拿来主义”,一眼就会被看穿的,不要问我怎么看出来的,看多了你也就能一眼望穿了。

借鉴总是好的!但不要复制TA的风格或元素,试着创造你自己的风格和想法,这样才是好的借鉴形式。

 

三、不拒先生:从来不拒绝需求

这种“职场好人”性格其实是非常可怕的。不是所有的需求都是合理的,也不是所有的需求你都能做。但只要你接下了,你就要负责到底。

新手容易犯的一个错误就是:不会评估工作量,leader 给你工作的时候他会有个时间预期,但有时候也不是完全准确的,你要自己评估在这个时间内是否可以完成,完不成的话就要 say no,重新规划时间。

还有一个比较容易犯的错是:leader 给你任务,你为了凸显自己工作效率高,来几个需求接几个需求,完不成的话就自己硬扛着熬夜加班加点,虽然说这样可以多接触需求快速成长,但长此以往,如果有个需求加班加点都搞不出来,你又承诺了没问题,最后没完成导致研发延期了,只能你背锅。

要适当的合理安排需求,不要工作一年,加出来三年工作经验,你这是卷谁呢?

图片

在设计澄清的时候,别人反馈的问题做记录,然后思考合不合理,不要一有质疑声你就觉得自己的方案不行,就改改改,有的质疑是合理的,有的不合理,你要有判断,设计决策你来把控。

图片

平时自己做好需求的时间规划,细化到小时维度,这样别人再问你有没有时间接需求的时候,你就可以理直气壮的告诉他有 or 没有。

还有一个需要注意的就是,跨部门的上级找你做东西的时候,一定要让他找你的直属 leader,保证需求的统一入口,这样对大家都好。之前我部门就有个设计师,别的部门领导就老直接找他做东西,然后回头我们老大找他要之前任务结果的时候,他才说没完成~

摸鱼法则第一招:我很忙,需求往后排~

 

四、多情:今天喜欢他,明天喜欢她

产品化的界面可不是你喜欢什么就设计什么的,要考虑整体风格。尤其是 B 端产品,风格统一和样式延展性是必要考虑的因素之一,你可以有个性化,但不要跟现有风格违和,适合的才是最好的。

当然了,这么说不是让你不要创新,是在原有地基之上创新产品。你设计的再好看,红杏出墙了有何用?新手和老手的区别,在于一个只关注当下,一个考虑全局。初级只会把当下做的尽善尽美,活灵活现;老手会在保证全局完整性的前提下最大化的产品创新和易用。

图片

每年流行的设计风格是不一样的,专注视觉展现的产品来说,可以追随设计潮流,展现最新的设计风格是没问题的。但是像 B 端产品,风格迭代是要有时间周期的,而且大部分比视觉风格的周期要长,所以每次大改版的时候,要考虑未来的设计趋势。

刚才我也提到了,最佳方案永远不止有一个,找到适合自己产品的就可以,如果有一些方案都觉得不错,可以做 AB 测试,选出最好的方案做产品化。

鼓励多看、多学,自己思想加工好了融合到产品中,而不是一味地直呼:这个设计真 NB!我也要用!

 

五、感性大于理性

字面意思很好理解,之前我们都说设计师是感性的,但是当设计与商业结合,就不能是纯感性的了。任何的产品设计都是基于数据、基于市场需求。我们大部分设计师都不是艺术家,都在为连接商业而努力。

而且设计师也在向理性化慢慢发展,拿设计师的价值来说,之前是很难被体现出来的,现在因为和商业结合,价值慢慢的被体现出来、慢慢可量化了。

我们在做产品设计的时候也是这样,基于调研和分析来做产品,而不是天马行空,想到什么做什么。设计从感性逐步走向理性,也是一个成长的过程,一切以结果为导向,善用理性思维思考问题,会更让其他人信服。一切设计都有理有据,和别人 battle 的时候也不怂~

ps:在和女朋友交往中恰恰相反,切记~切记~~

 

六、妄想:可以创新,不要妄想

一切设计都是以结果为导向,YY 出来的飞机稿只能送到村东头的厕所里。我们在脑暴设计方案的时候,一开始都是天马行空,想到什么就写什么,但是最终都会聚焦到产品上,缩小聚焦点,最后产出可落地的方案。

图片

设计师的创新能力是很重要的,为什么企业在招人的时候,会更看重年轻一些的呢?因为他的脑洞是打开的,有更多的 idea 迸发出来。如果你只是循规蹈矩的维护产品迭代,迟早会被淘汰。

设计本身就是一个开阔脑洞的一群人做事情,所以早些年设计师的价值是无法被量化的,近几年都在讲量化指标、结果导向,设计师的价值也慢慢的被量化出来。

一个好的产品设计师输出的方案不一定是最完美的,但是绝对是在能落地的基础上接近完美的。不够完美我们可以再优化,如果一直停留在 YY 层,永远不能落地实现,那你的价值何在?

我相信大家在面试的时候也都感受到过,线上作品远比飞机稿要重要得多,因为他可以验证你的方案是可行而不是你自己 YY 的,公司招你来是让你有具体产出的,不是来让你当艺术家烘托气氛。

我们经常会在大胆创新和为了功能上线的边缘试探,哪怕是多一点点的设计元素加进去,也是我们努力的结果。

要记住,我们是设计师,在飞翔的时候看清边界在哪,我们是带领世界品味走向的一群人,可以创新不要妄想。

 

七、炫技:装饰性大于内容本身

最好的设计就是不用设计,最好的设计是简单的。

部分设计师在出方案的时候,为了凸显自己的设计能力,会有意无意的增加一些装饰元素设计,然而页面的承载量是一定的,装饰性的设计过多会直接影响用户找到页面中的重要信息。好的设计不需要过多的装饰,苹果的极简风就很棒,一直沿用至今。

其实现在产品上并不是装饰的重灾区,作品集才是!我们团队在招人,每天能看到大量的简历,确实有很大一部分人为了凸显设计能力,把作品集做的五彩缤纷,整成了大杂烩,而且装饰性的元素、样机比以往工作项目的占比还要多,这不就喧宾夺主了吗?这样的作品集基本就无缘了~

在设计之前,一定要了解最终目标是什么,然后基于目标再拆分行动项,把不必要的内容直接砍掉,用户在浏览页面的时候,有效时间就 3 秒钟,3 秒钟没有找到自己想要的内容,就会流失。

我们只会吐槽老板的那句:“放大放大再放大”。其实深入想一下,他只是想要突出一个点而已~

不要捡了芝麻丢西瓜。

 

写在最后

设计中有很多很多的问题,我们也都是在不断的摸索中成长,今天给大家分享了几个典型的“罪”,希望引以为戒,哪怕其中一点对你有帮助,也不枉码这么多字~

今日金句:

在非洲大草原上,无论你是狮子还是羚羊,每当太阳升起,你唯一要做的就是奔跑。

图片

叮铃铃~~下课!

 

原文地址:友设青年(公众号)

作者:Luckgg

转载请注明:学UI网》设计的「七宗罪」

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

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

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

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


业务想大多全,用户要精准简,首页设计该如何破局?

seo达人


图片

“不行,这个必须在首页!另外我还有俩新业务入口,你想想办法”,业务方出于对流量的考虑,总是希望做加法。

“别整那么多没用的,我就想找个xx,剩下从来不看的”,用户出于效率体验,总期望做减法。

加减之间,是业务与用户对立而尖锐的需求,同时也是多类型服务产品首页设计的重难点。今天,就以“58首页设计”为例,与大家谈谈解题思路。

 

01.什么是多类型服务产品?

简单说就是,多个关联度较低的服务捆绑在一起形成的产品,常见于平台式工具产品,例如支付宝、美团、58同城等。

 

02.设计挑战是什么?

以58为例,一方面,业务工具属性强,且用户耦合性低。说人话就是,用户都是来找工具的,但由于AB业务关联度太低,用A业务的用户几乎不会用到B业务,AB业务分别拥有独自用户群。这也就造成用户期望更高的推荐精准度,页面上任何一个无关信息都是干扰,都是对连接效率的打折。

但另一方面,平台上的业务很多,还都想在首页曝光。而且随着各业务设计师的不断努力,连接的形式也在不断丰富,视频、直播、VR,从业务贴到聚合推荐,层出不穷。首页面临更大的信息承载压力。

所以,这类型产品首页最大的挑战,就是“多业务的曝光需求和用户的精准连接之间的矛盾”,如何才能在推荐技术不变的情况下,通过设计来应对挑战呢?

 

03.如何破解?

既然是信息传递和收取之间的矛盾,那我们就从“人-场景-信息”的对应关系入手,分析信息在不同场景的优先级和适合的颗粒度。

图片

人-场景-信息优先级和颗粒度

 

1、用户分类

根据用户需求分为三类。

1)预装用户:非自主下载,不了解产品功能

2)服务需求用户:使用相对固定的服务

3)内容需求用户:获取本地或相关服务信息

2、按照用户区分场景需求

1)预装用户:建立产品认知、保留用户不卸载

2)服务需求用户:更有针对性的服务展示,尽可能少的干扰信息

3)内容需求用户:更多类型的内容展示

3、按照场景定位信息的优先级和颗粒度

1)预装用户:

采用运营曝光策略。保留一级主服务入口,帮助建立产品认知。同时曝光更多内容信息和留存向的运营功能,以提升留存率。

图片

预装型用户信息

 

2)服务需求用户:

采用目标服务曝光策略。保留一级业务主服务入口,方便业务切换。但扩展目标服务的二级信息曝光度,用以缩短路径。同时增加动态服务模块,来跟进用户动作,服务于用户。

图片

服务型用户信息

 

3)内容需求用户:

采用平衡曝光策略。保留一级主服务入口,方便业务切换。同时扩展内容曝光度。

图片

内容型用户信息

 

04.设计思路

1、搭建扩展性框架:调整为顶部tab结构,释放更多定位信号,增加曝光渠道。

原腰部tab是对“原首页”内容的划分,现将整个“首页”置于第一个tab下,后续tab内容将与“首页”并列,从而释放更多独立的曝光渠道。

图片

腰部tab结构
 

图片

顶部tab结构

 

2、使用更灵活的组件:变形金刚与瀑布流。

首先,金刚位是一级服务入口的集合,且处于首屏上部,是非常好的建立产品认知的模块。将其原有打散在15个位置上的服务,按照大类聚合安置,更容易传达产品的主服务是什么。

图片

金刚位结构对比

 

其次,为了应对用户精准简的需求,金刚也可以做灵活变形,曝光更多目标服务的二级选项。

图片

变形金刚位

 

而瀑布流方式也为更多样的服务连接形式提供了承载能力。

图片

列表与瀑布流

 

3、丰富的信息容器:

设计包含图、文、图文、VR、视频、聚合类目、动态服务模块等信息聚合方式的瀑布流卡片,同时加入即时推荐功能,让瀑布流具备包容和灵活的特性。

图片

组件容器

 

4、整合平台的运营能力:设计平台级留存向运营中心。

以往,各业务线运营功能深藏在业务页面中,用户往往需要通过较长的路径才能接触到运营功能,且用户也并不能发现平台上所有运营功能。这种分散式分布的方式,使得运营吸引力和留存能力上都打了折扣。现将所有业务的运营功能聚合,打造平台的运营中心,使发现路径更短,聚合吸引力更强。

图片

原路径&现路径

 

图片

默认服务型首页&上滑2楼运营中心

 

05.设计展示

图片

从依靠推荐技术让内容适应用户需求,到设计灵活可变动的组件来适应chang场景的信息承载,我们希望可以在产品和用户需求的矛盾中寻求更优的平衡点。

 

 

原文地址:58UXD(公众号)

作者:环铁艺术家

转载请注明:学UI网》业务想大多全,用户要精准简,首页设计该如何破局?

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

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

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

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

超喜欢,这个AI小技巧!

seo达人


图片
 
什么?还有人不知道这种字体效果是怎么做的?
好吧,就让可爱又迷人的星火君把这个方法分享给你们吧!

开始学习啦!

 

教程步骤

图片

图片

图片

图片

 

1.打开ai

输入文字。鼠标右键单击,选择变换——对称,之后选择水平,并点击复制。

把文字镜像复制一个。

 

图片

图片

 

2.符号面板

整体旋转90°,并调出符号面板。选中文字,鼠标拖入符号面板备用。

图片

图片

图片

图片

 

3.画圆

用椭圆工具制作一个正圆

之后选择效果——3D——凸出和斜角。勾选预览,调整角度和凸出厚度。

之后点击贴图,勾选三维模型不可见,选择第3个面,符号选择我们刚刚拖进去的文字,也就是新建符号,点击缩放以适合,让文字贴合画面,点击确定。

再稍微调整角度,调到合适的位置,就可以了。

 

图片

图片

图片

 

4.扩展外观

之后对象——扩展外观。

右键取消编组,再右键释放剪切蒙版。

这样就可以随意更改文字颜色啦。

图片

看起来步骤很多,其实操作起来还是很简单的。everybody,学起来啊!

那小分享就到这里吧,下期再见哦~

 

原文地址:诗人星火宇宙(公众号)

作者: 星火君

转载请注明:学UI网》超喜欢,这个AI小技巧!

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

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

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

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


G端可视化中的适老化设计

鹤鹤

前言


调查显示,2020年我国老年人口达到约2.43亿,占比18%,50岁以上的网民群体占比22.8%,G端可视化面对的主要群体就是政府领导,而政府大领导普遍都是市级及其以上,年纪大多数为60岁往上,属于适老化的涵盖范围,因此探索适老化在G端大屏中的体现,也是很有必要的。

有人说:适老化是减少操作,注重呈现,是在设计方案中的体现。并且适老化设计,本身也是给老年人群体的一种特殊定制。

在我眼里看来:G端可视化大屏本身就是面向定制化,不存在特殊化或普遍化,因为他的群体本身就是老年客户,既然是这个群体,那么适老化就是我们设计师需要考虑的。



一、通用性和包容性设计


首先一般讲适老化无障碍设计,我们都要提到的就是通用性设计和包容性设计。


通用性设计


原则:强调设计所有的系统和产品,使每个人都能使用,无论他们的年龄或能力。

百度百科将通用设计定义为:“能被失能者所使用,就更能被所有的人使用。通用设计的核心思想是:把所有人都看成是程度不同的能力障碍者,即人的能力是有限的,人们具有的能力不同,在不同环境具有的能力也不同。”

通用设计中应当也包含对于特殊人群的基本考虑,要让目标人群觉得:鱼和熊掌都可兼得,既照顾了特殊人群的使用,又兼顾所有人。



包容性设计


则 :好的设计应该满足尽可能多得使用者的需求。

百度百科将包容性设计定义为:包容性设计着眼于清楚源于使用主体而造成的各种障碍,使每个个体都能平等、自信、独立的正常使用,为同一适用条件下的互动提供了新的视角,也为创造性和问题解决导向的设计提供了机会。


那么我们应该如何践行通用性和包容性设计在G端可视化中的理念呢?



二、客户的困境-现状分析


通过分析客户的困境,结合现状进行深入分析,发掘政府端客户的普遍性存在的问题。


年龄分布适老


大多数政府省市级领导人的年纪均在60左右,由于年龄普遍较大,对于设计的认知会有偏差,对于审美的把控以及设计本身的价值理解会偏弱。

从去年十月上旬开始,省级党委换届拉开大幕,在至今近8个月的时间里,全国31个省区市先后展开换届。经过此次换届,干部队伍的年龄结构得到进一步优化,初步形成“50后”为主导、“60后”渐成中坚的格局。

根据公开资料统计,31省区市书记平均年龄为58.1岁。其中,“40后”书记有6位,“50后”有22位,“60后”也有3位,某区党委书记胡XX和XX省委书记孙XX同为63年出生,是最年轻的书记。



生理机能下降


视力:老年人视力的下降,影响眼睛对空间、颜色、明暗等加工等;

听力:听力弱化造成的听不清楚,尤其是在嘈杂的环境中,老年人听起声音来会更吃力;

表达力:专业化的术语以及需求,会使表达和沟通不便;



认知能力不足


互联网和人工智能等技术发展变化太快导致认知力的不足。

绝大多数的老年人对现在数字化的产品很陌生,再加上复杂的界面操作,需要反复的学习使用才能熟悉掌握。



三、设计的探索-客户心理


ToG类型的项目,我们的客户群体是政府的某个部门(G端行业中,政府部门因为权限和管辖内容的不同,客户的诉求也会不一样,同时由于决策层是一级一级往上的,对于各个层级的领导都需要去进行满足,对于设计的要求也就更高了),因此我们需要对客户的心理进行重点挖掘。


1、政府部门客户的特点


  • 严谨务实原则

政府部门的领导或者员工大多数都是高知人群,对于工作的态度都是非常严谨,喜欢按规矩办事,分工明确,力求事情做到一丝不苟,有理有据,讲究严谨做人,务实做事。


  • 安全性原则

政府部门的保密工作需要做的非常到位,尤其是关于公安等民生问题时。另外政府类客户一般对于数据的保密做的非常好,基本都是内网开发,私有化部署,一切互联网的东西连接内网都会报警。如果是外网开发,则需要做好数据存储,一定要非常注重数据安全。


  • 实用性原则

政府类的软件或者产品,基本都有很强的实用性,实用好用才是客户最关心的问题,因此在系统架构上需要做到,简单高效,快速触达,减少客户的学习成本。


所以针对政府客户特点,我们需要做到严谨务实的态度,安全实用,简单高效。



2、政府部门客户的需求


  • 正文字要大

对于文字大小的需求比较强烈,提及最多的就是字体放大,加粗。


  • 屏幕要看清

对于画面能够看清,需要重点表现在前景和背景的色彩对比度。


  • 画面要酷炫

对于画面的表现,要更加的酷炫,在客户眼里,动态图形效果远远大于静态效果图。


  • 饱和度要高

随着年龄增长,人类的晶状体会变黄变浑浊,导致选择性的吸收蓝光。所以蓝色色调在老年人眼中可能会出现模糊褪色的视觉效果,从而降低元素在界面中的对比度, 因此需要提高色彩的饱和度。


  • 逻辑要清晰

产品整体架构以及内容逻辑清晰,简单高效,上手简易。


所以针对政府客户的需求,我们需要做到画面清晰,视觉酷炫,色彩明亮,逻辑清晰。



四、策略的应对-解决方案


通过对政府类客户的分析,挖掘客户最深层的需求,针对于以上的关键点,提出适合的解决方案,大体在一下6个方面的全面解析。


1、解决方案:框架


对于系统框架以及布局进行一屏式展示,减少系统层级的递进。

对于展示形式上可以更清晰准确, 尽量模块化展示每个需求,做到聚焦用户视角,提升画面表现。

整体交互流程简化,复杂以及多层级弹框尽量少使用。



2、解决方案:字体


  • 中文字体

中文字体类型的使用,在使用数字屏幕阅读时,字体的选择要选用无衬线体(比如黑体,微软雅黑)厚重一点,不可选用衬线体(比如宋体,书法体)比较单薄。


  • 英文字体

英文字体类型的使用,英文数字的字体选择更明显的粗体,因为要展示数据,使得数据展示更加直观,依旧是选用无衬线体,比较推荐:D-DIN字体。


  • 字体大小

字体大小的定义。在字体大小的选择上,参考了页面上常规大小,定义了一套关于不同尺寸下的标准字号,正常1080P页面,最小字号不小于16px,具体字体大小还需要参考设备清晰度,环境灯光,视距等因素。




3、解决方案:颜色


  • 颜色对比

界面中的前景与背景的对比度,是否足以让政府类客户清楚识别;

颜色不应该用作传达信息的唯一视觉手段,需要用额外的文字提示;

通过 H(色相)S(饱和度)B(明度)的数值来划分色域,在保持H值不变的前提下,定义了10个色域。所以在前后景的颜色选择上,满足跨度至少为6,才能让目标人群准确识别文字信息。


  • 对比度检测

视觉呈现以及文案图像对比度至少要有7:1,大文本至少有4.5:1的对比度。有很多在线工具可以帮助检测颜色对比度以及是否达标,如Contrast Ratio 在线检测工具:

https://contrast-ratio.com/



  • 颜色多样

画面采用多种饱和度较高的颜色,而不是单色;

颜色的丰富程度决定了画面的视觉表达,色彩越丰富,画面表现越好;



4、解决方案:图形


增加图形的占比大小,提升视觉上的表现;

尽量采用识别度较强的图形和图标,尽可能贴近客户的认知范畴;

图标和图形尽量搭配文字描述,方便客户更清晰更快速理解。



5、解决方案:视距


观测距离的远近,也决定着画面的展示效果,尽可能的拉近观测距离;

正常视距观测下,以常规设计规范去制定即可,如若观测距离较近,则可适当缩小相应的视觉表现,反而观测距离较远,则放大视觉。



6、解决方案:设备


设备的尺寸、精度,分辨率大小都会影响目标人群的体验;

在设备精度较低,或者说点间距过大时,应当适当放大视觉表现,点间距小的则显示非常清晰,可适当缩小视觉表现。



五、规范的提炼-应用推广


为了保证适老化的推广,需要在适老化的基础上统一标准,在字体,颜色,框架,图形等内容上做出提炼,深入了解目标客户的需求以及客户心理。

本着严谨务实,安全性,实用性等原则,沉淀出一套符合目标人群的设计规范,应用并推广到不同设计团队以及推广到广大设计师中去。



六、未来的期许-设计使命


我们需要不断践行适老化设计原则,体现设计的通用性和包容性,应当在设计表现和产品功能上更加的包容这个群体。人工智能大数据时代,虽说政府类客户会比普通人更容易接受,但是受制于某些原因,推动解决老年人面对智能技术的问题解决才是重中之中。

设计师也需要运用自己的专业性,来帮助目标人群融入数字化的生活中去。

因为在不久的将来,我们也会变成这个群体,当我们面对这些束手无策时,那时的设计又会是如何适老的呢?适老化设计是适合所有人的设计,所有的设计师都应该密切关注。



七、全篇总结


1-不要依赖颜色来传达信息(客户更喜欢文本,有特殊含义除外:四色预警,国标色);

2-文字展示要清晰,字号大小要更加适合目标群体;

3-提高颜色对比度,丰富画面色彩,禁止使用单一色系;

4-界面中重要元素应尽量避免使用蓝色(特殊行业除外:公安等其他);

5-增加图形以及图标的视觉表现,尽可能做到一目了然,便于客户理解;

6-尽可能拉近观测距离,提升观测体验;

7-选用高性能,高清晰设备,提升观感,优化客户体验;

8-针对政府客户特点,做到态度严谨务实,安全实用,简单高效;

9-针对政府客户的需求,做到画面清晰,视觉酷炫,色彩丰富明亮,逻辑清晰;

10-盲目照搬照抄而不去具体问题具体分析,这些无障碍设计在某种程度上就会成为“障碍”设计。

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

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

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

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

如何在企业官网刻入品牌DNA?

涛涛

我们可以从哪些维度强化品牌特质?我们在保留天虹品牌DNA的同时,实现新业态的呈现升级,向市场展示一个崭新的天虹。

如果聊起中国的零售巨头,我们一定不会忽略天虹商场(现“天虹数科商业股份有限公司”)最初所占据的一席之地。天虹是国有控股的上市公司,自1984年天虹注册成立后一年,第一家天虹商场——天虹深南店开业,正式开启零售业的征程,成为全国零售业的先行者之一。


天虹成立的30余年来,历经了经济发展的巨大变化所带来的市场繁荣,这也使消费需求多元化成为不可逆的潮流,越来越多中国零售企业采取了多业态发展战略,零售市场从过去的百货商店、副食店一统天下的局面迅速发展成为多业态并存的市场格局。


目录


01  项目展示

02  天虹品牌分析

03  天虹品牌DNA及核心竞争力

04  天虹新业态的呈现升级

05  从多维度强化品牌特质



天虹品牌分析 


过去几年,天虹不断在全渠道方向转型,突破传统购物模式,践行数字化、体验式、供应链三大业务战略,大力发展线上线下一体化的智慧零售商业模式。如今,它更把自己定位为一家提供生活解决方案的服务商。


天虹零售行业数字化转型正在如火如荼的进行,产品线的扩张让目标客户发生了变化,反观消费人群对天虹的印象,仍然停留在天虹仅是一家老牌的实力零售国企的形象,天虹这次找到我们进行官网改版,目的就在于此——在保留品牌DNA的同时,实现新业态的呈现升级,向市场展示一个崭新的天虹。



天虹品牌DNA及核心竞争力 


天虹自2008年确定新的品牌战略以来,始终将“亲和、信赖、享受生活”的品牌核心价值贯彻到底,天虹从事零售行业,贴近生活的脉搏,与生活息息相关,更是以“分享生活之美”作为企业使命。


品牌DNA不可复制,我们率先从品牌的视觉资产切入,计划在天虹新官网具体的视觉设计元素上,例如图标、颜色、配图等,结合品牌强化天虹DNA记忆符号,让记忆符号给访客在视觉、“触觉”等感官上加深印象。


一进入天虹的新官网,首屏上,一句“天虹,分享生活之美”的slogan配合自动播放的短视频,点明了天虹十余年以来一直坚持的品牌使命,天虹对自己品牌核心价值的阐述,也穿插在新官网的各个版块中。



天虹的品牌Logo是一抹橙色极简的彩虹形状,同时也是一丝纽带,意在构建一座通往利益相关者之间的桥梁,营造和客户之间平等、亲和、互相信赖的客群关系。


在首屏接着往下,一句精简的文案充分阐述了“天虹,分享生活之美”的品牌使命,同时应用了天虹logo一抹橙色极简的“彩虹”元素,把品牌基因融进网站交互与视觉设计,能让用户自然地产生与品牌间的联想,加深品牌印象。



这样给访客加深品牌印象的设计不在少数,例如从“了解更多”进入到天虹企业简介的Banner以及每个页面的底部导航,都有从天虹Logo特征延展出来的图形设计。



色彩是一个非常重要的品牌基因。从品牌色延展的色彩方案贯穿应用到网站中,是最为常用的建立品牌印象的方法。


用品牌色作为组件和高亮色自然是不用多说的:



但是,色彩并非越丰富越好,过于丰富反而会干扰访客对网站内容的吸收,我们根据品牌调性控制好品牌色的应用数量,有时候单色或者双色的配色方案更能形成突出的风格和印象。



大面积的色彩虽然能刺激用户的视觉感知,但是也可能分散用户注意力,因此,如果网站有更多资讯阅读类的内容就不适合用过多的色彩,否则会破坏用户的沉浸体验。


“分享生活之美”的主旨在网站中更多的表现在配图上,除了刚刚展示的首页视频,我们还在各个版块穿插了不同生活场景中有温度的图片素材,这些图片素材流露出专注、有朝气和亲和力的氛围,一定会让访客对天虹的好感油然而生。



在各行各业竞争日益激烈的当下,企业历经单一的价格竞争、广告竞争和产品竞争等方面的竞争之后,企业的品牌具有区别和领先于其他竞争对手的独特能力,能在市场竞争中展示品牌的内在品质、技术、性能和完善服务,引起消费者的品牌联想,促进其购买行为,因此,品牌竞争力会逐渐成为企业的核心竞争力。


在现如今的新零售时代,顾客体验感的提升、用户和线上+线下移动端多渠道的互动影响,让企业核心竞争力不再是孤立的某一个因素。而天虹30余年以来,能够保持自身的核心竞争力——品质与服务,这是天虹站在顾客的立场角度,去思考自身企业真正能够带来的价值,我们专门为此设计了一个【品质与服务】页面。


在品质上,除了阐述天虹一直贯彻并强调的经营理念,以及一直以来的践行,我们通过呈现权威的认证证书、六项质量大数据以及天虹的质量管理规范,更强有力的证明天虹品质。



同时,加入时间轴的交互设计,更清晰明了地向访客展示天虹从1987年至今,为顾客保证商品品质所付诸的行动,以及所获得的品质认证奖项。



在服务上,我们分为顾客选择天虹的服务之前、天虹服务顾客时、完成服务之后这三个步骤,明确说明天虹可以向顾客保证的服务品质。


在顾客选择天虹之前,我们运用七种颜色的交互动效,展示天虹可以给顾客的七重品质保证,每项保证都有针对性的服务承诺。


这里还有一个在背后小小的设计想法,七种颜色正好对应彩虹的颜色,也正好和天虹的“虹”相呼应。



为顾客提供服务过程中,直接列出了天虹五项顾客服务的基本准则,体现了天虹为实现品质服务的切实行动。



天虹完成服务之后,分别展示四个场景、渠道保证顾客无忧售后。



天虹新业态的呈现升级 


天虹不同以往的是新业态的改变,要呈现具备科技力的天虹,我们在策划品牌网站时要确定这两大要素:


  • Who—天虹的目标访客群体?

  • What—天虹正在做什么?



Who 天虹的目标访客群体?


一个网站的诞生,是为了服务特定的用户,在网站设计阶段,产品经理通常需要把网站设计构想和思路提交给产品研发团队、视觉和交互设计团队进行网站的设计开发,我们的设计开发团队如何才能清晰理解访客的真实需求?


那么,除了网站需求文档、原型图为主,还要把用户画像作为辅助说明,让我们设计团队成员在设计网站的过程中,对网站目标访客群体有一个更形象化的认识。我们在这不做对访客基本人物属性的分析,而是主要分析访客的使用场景以及访客故事,从而对网站版块、访客体验、访客通过网站完成任务时的浏览路径进行设计。



经过一系列的访客画像分析,我们可以肯定的是,扩张了产品线之后的天虹,新官网的目标访客也会面向更多群体,因此我们将会从这四个应用场景来决定建站方向:



只有让这四个目标访客群体浏览了天虹的新官网,才能真正实现向市场展示出一个崭新的天虹。


What 天虹正在做什么?


我国社会数字化转型进程的不断加快,数字化转型是包括零售企业在内的所有企业,都绕不开的一个重大课题,它能够为企业带来新的发展机遇。


对于天虹这样的零售企业来说,便是借助数字化技术提升企业的运营效能、降低企业运营成本,构建新的数字化环境下新的商业模式是最终目的。在【智慧零售】版块,正式介绍天虹数字化转型发展的新业态。


在为顾客服务上,天虹零售形式的变革是以交付为主要方向的变革,重塑全渠道零售形式之后,【天虹APP】与【超市数字化】把到店与到家等零售形式相融合,实现了顾客“所想即所得”的交付需求,助力了消费升级。


我们在对应的展示版块,附上相对应的使用场景图片,以及天虹APP、天虹小程序的二维码,更有利于访客即刻体验由单一的到店交付,到到家等多场景的便捷交付。



天虹在进行数字化转型中,还瞄准了一个重点是以数据驱动购物百货运营模式的重塑,能够实现原先由人决策、执行、协同,转变为由数据决策、数据执行与数据协同。


天虹购物百货的运营模式在进行数字化重塑之前,仅是依靠商户品牌形象+店内交易才得以完成交易,在【购百数字化】的说明中,我们展示了天虹“Before+After" 的数字化运营模式,向访客充分说明天虹从智能方面寻求新的突破,通过智能设备与数据智能,从而提高了入驻天虹商户的运营效率、降低运营成本的重要措施。



我们明白,信息架构作为网站交互视觉最底层的支撑,只有骨架搭好,对于用户的使用体验才能够有本质上的提升。在商户服务上,天虹还做到服务产品化,我们分别从这两类业务入手为访客做好阐述:


  • 平台业务:天虹在自己构建的平台上为商户提供各种经营工具及服务管理方案;

  • 数据业务:天虹会提供海量数据集成展示的看板给商户。


天虹具体赋能商户的四项支持,我们遵循整站的简约风格来做展示:



【天虹科技子公司】则直接跳转到灵智数科的官网,这是由天虹数字化经营中心孵化的数字化零售SaaS产品,为零售企业提供数字化转型方案,这更能表明天虹未来在实体数字化深耕的决心。



天虹在购物中心&百货、超市、便利店的运营模式中迅速铺开数据化、信息化、智能化的建设道路。其中,我们将天虹超市数字化运营细分为四个方面,真正做到可触达、可交互、可洞察、可追溯。



天虹微喔便利店同样运用线上+线上双模式,从四个方面共同打造天虹微喔的品牌力。



在天虹新业态的展示中没有做花哨的视觉和交互设计,因为当我们对信息架构有足够的认知时,我们在设计页面时才能有合理的思考方向,做出正确的设计,一家老牌的实力零售国企的数字化转型,我们更倾向通过展示一些应用场景,将具象化的价值传递给访客,能简则简。



从多维度强化品牌特质


消费升级时代的到来,数字化技术已经与传统的产品和服务产生了紧密相连的联系,正因有天虹这样的企业率先进行改变,我们早已能在日常生活中切实感受到服务的优化和改变。


我们团队通过品牌梳理进行本次天虹官网的改版,从天虹的品牌DNA、核心竞争力以及升级新业态的呈现等多个维度来强化品牌特质和传递品牌价值。我们在新官网做到对三个方面的升级,真正做到向市场展示一个亲和力与科技力并存的新天虹:


a.更温暖

天虹从事零售行业,以“亲和、信赖、享受生活”作为品牌核心价值,更是以“分享生活之美”作为企业使命,与我们的生活息息相关。在天虹新官网里,我们呈现了更多有温度的生活化应用场景,让天虹的形象更贴近用户,更贴近生活的脉搏。


b.更清晰

天虹的数字化新业态转型、品牌符号和视觉形象在新官网更清晰有力的传达给各个访客群体。天虹作为一家成立至今已有30余年的老牌零售国企,我们更倾向于谦虚地阐述天虹的营销理念,保持良好的信息层级可以让整体的浏览体验感更好,而不是对品牌展示的过度包装。


c.更立体

网站设计的过程是先发散后收敛,我们在动手画原型、写文档之前,需要进行大量的思考和调研访客实际的浏览逻辑究竟是怎样的,也就是回归应用场景。在天虹新官网的建设中,我们确定四个目标访客群体来指导网站布局设计的方向,其中【洽谈合作】、【投资者关系】与【人才发展】版块的设计,让天虹诚信、分享、创新和开放的形象更加立体,访客或许会因此对天虹多一份信赖。


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

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

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


听说这是最难的配色方法——互补色篇

lanlanwork


01 互补色的定义

互补色分为“光学互补色”和“印刷(色料)互补色”两种。

光学互补色:两种色光以适当的比例混合,能产生白光时,则这两种颜色就称为“互为补色”。

本文主要探讨的是印刷(色料)方面的互补色:在色相环上相对180°角的两种颜色,这两个颜色混合会得到灰色。

图片

互补色由于在色环上相距最远,色彩差异最大,色彩对比很强烈,合理的搭配往往会产生强烈的视觉冲击力。

虽然从色环上来看,互补色可以有很多组,但最常用的互补色有3组,分别是红和绿、蓝和橙、紫和黄。

 

图片

由于红色和绿色在色相上缺乏共性,放在一起会造成极强的视觉反差,搭在一起容易有格格不入、扎眼的感觉,容易出现散乱、土气的感觉。

要取得好的视觉效果,则需要使用一些调和手段,可以在明度、饱和度上中和两种色彩的突兀,使其形成和谐统一的对比。

图片

图片

 

图片

蓝橙是一组经典的冷暖互补色,温暖的橙色在与偏冷的蓝色搭配时,更加醒目,活泼的橙色可以很好的缓解深蓝色的沉闷,增加画面的愉悦气氛,可以很好的营造出画面的层次感。

图片

图片

 

图片

紫色和黄色不论是色相还是明度差异都非常大,因此黄色与紫色的搭配容易产生相当高的视觉强度。

图片

 

02 互补色配色的方法

互补色对比性强烈,因此在视觉上会产生极大的隔离作用。由于色相对比过大,配色难度也最大,如何化解互补色之间的冲突感,是用好互补色的关键。

 

1.通过面积比来达到平衡

如果使用面积相近的互补色的搭配,具有强烈的冲突感,产生的视觉效果强烈而鲜明,情感浓烈,令人记忆深刻。非常适合夸张的、张扬的情感表达。

图片

大多数情况下,我们会选择一种颜色作为主色调,大面积的色相占据主导位置,再用小面积的互补色去点缀画面。这样才能表现出主次关系和丰富的色调效果,色彩对比强烈却又不违和。

图片

 

2、调整明度与饱和度来减弱色彩冲突

高明度与高饱和的互补色搭配,对比强烈,在视觉上会产生极大的隔离作用,它们组合在起,会产生相互衬托、相互抗衡、相互排斥的感觉,并使各自的色相更显突出,更为艳丽,具有强烈的视觉冲击力。

图片

可以考虑降低互补色的明度与饱和度,来减弱冲突,既保留了对比色搭配的特点,同时降低了过强的视觉刺激。

图片

 

3、加入中性色缓冲其强烈的对抗性

互补色鲜艳热烈,而中性色(黑白灰)则刚好相反,它们毫无情绪感,中庸冷静。在对比色中加入中性色可以很好的调和画面的平衡感。通过中性色的调和,既保持了互补色所带来的丰富的层次感,也避免了互补色之间强烈的冲突。

图片

 

原文地址:艺海拾贝Design(公众号)

作者:邓海贝

转载请注明:学UI网》听说这是最难的配色方法——互补色篇

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

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

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

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


日历

链接

个人资料

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

存档