首页

Material Design暗色主题设计指南

ui设计分享达人


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

本文是我学习Material Design设计规范的学习笔记和个人理解,希望对大家设计暗色主题有所帮助。

undefined


暗色主题是什么?

最近,Material Design中新增了关于暗色主题的设计规范:暗色主题(Dark theme)是指在UI界面中使用大面积的深色来构成界面的一种设计,它是产品默认主题的一种补充。很多朋友可能认为暗色主题就是现在新闻客户端的“夜间模式”,这个说法其实并不正确。因为暗色主题是可以由用户自己选择是否开启的,它的使用场景并不局限于夜晚。很多用户偏爱暗色模式是因为暗色更“酷”。比如前段时间苹果电脑增加了类似的“黑暗模式”(Dark Mode)的设计,大受用户的喜爱。用户沉迷使用暗色主题,而不是以前灰色的默认设计。暗色主题不但颜值高,而且可以在保持色彩对比度的同时降低设备屏幕的亮度,还可以根据当前照明条件自动调节亮度,这有助于改善视觉疲劳。除此之外,暗色主题还可以节省设备的电量,可谓是一举多得。那么,暗色模式都有什么样的规范呢?

 

undefined 

首先,暗色模式用深色视觉元素来构成界面的UI

 

undefined 

使用深灰色进行设计

在设计暗色主题的时候,我们应该使用深灰色来进行界面设计。黑色由于太过于深邃,无法让用户感知当前界面的高度和空间感,而不同级别的灰色就可以暗示给用户这些信息。

 

 undefined

使用强调色彩突出组件

在暗色主题下,我们可以使用少量的强调色彩来凸显一部分功能或者组件,大部分的界面全部为深灰色,所以这些被凸显的部分会更加突出。

 

undefined 

节约能源

在很多带有OLED屏幕的设备中,暗色主题可以通过减少亮色的使用来有效地延长电池寿命。试验表明,使用暗色主题可以让设备的续航时间变长。

 

undefined 

增强可访问性

暗色主题对于色弱及有其他视觉障碍的用户非常友好,可以提升他们使用产品的体验。

 

规则

对比度:深色背景和100%白色正文文本的对比度达15.8:1以上。

信息层级:组件和元素通过较深和较浅的灰色来表达信息层级。

饱和度:界面中主要色彩与文字信息的对比度应该高于4.5:1(根据Web可用性指南的标准)。

设计少量强调色彩:我们在设计时会使用大量深灰色来设计背景,也会用少量强调色彩来表示更重要的信息,与背景产生对比。

 

undefined


关于信息层级

暗色主题的UI界面主要使用深灰色的背景和少量的强调色彩,它们不刺眼但仍然保持着很强的可用性。用户使用起来不会有任何的不舒适。界面按信息层级的重要性依次让用户注意到以下四部分:主强调色、次强调色、较亮的灰色前景、较暗的灰色背景。


undefined

 1 背景(高度:0dp);2 表面(高度:1dp);3 主强调色; 4次强调色;5 在背景上的元素; 6 在层级上的文字色; 7 主强调色上的文字色; 8 次强调色上的图标色

 

undefined


触发暗色主题的开关

我们可以设计控件来让用户打开(或关闭)暗色主题,这个控件可以使用很明显的方式来进行突出强调:比如在明显的位置设计开关图标来让用户切换;也可以使用不太明显的方式:在菜单或者设置界面中放置开关。


undefined

 形式1:顶部应用栏中的暗色主题开关

 

undefined

 形式2:在气泡中切换暗色主题

 

undefined

 形式3:在设置界面中切换暗色主题

 

暗色的属性

暗色主题使用深灰色而非黑色作为组件的主要设计配色。深灰色表面可以表现出更广泛的高度和深度,因为我们仍然可以在深灰色之上设计更重的投影。除此之外,深灰色的设计还可以减少视觉疲劳,因为深灰色表面上的浅色文字与黑色表面上的浅色文字相比对比度更低,对眼睛刺激较小。


undefined

 推荐的深色主题默认颜色为#121212

 

海拔高度

在暗色主题中的组件和在默认主题中的组件可以使用相同的海拔和阴影大小,然而在暗色主题下它们的色彩会根据信息层级的排序而改变,这一点是通过明度不同的灰色来表现的:海拔越高则越亮(暗示接近光源)。我们在这里通过给深灰色上叠加一层不同透明度的白色来改变亮度(不是直接做灰色的形状)。


 元素的海拔越高,颜色就越亮


undefined 

通过使用半透明白色覆盖层来暗示海拔:1.形状 2.带有透明度的白色叠加层

 

undefined 

默认主题使用阴影来表示海拔,而暗色主题则通过表面颜色来表示海拔


undefined 

不同的海拔高度与白色层不同的透明度之间的换算关系(透明度从0%到16%)

 

undefined 

A. 高度为1dp、5%白色叠加的卡片式设计; B. 高度为6dp的FAB按钮,使用了次要强调的颜色 C.高度为8dp的底部应用程序栏,12%白色叠加


undefined 

错误1:辅助色的配色所表示的海拔不应该过高

错误2:阴影的颜色应该暗于界面元素的颜色

 

可访问性和对比度

暗色主题表面必须足够暗才可以显示白色的文本。为保证信息能够被良好的阅读,文本和背景之间的对比度应不少于15.8:1。也就是说,我们不可以用纯白色来设计所有的文本信息,而要根据背景色和文本的对比度来调整。

 

如果需要创建带有品牌色的暗色界面,请在推荐的暗色主题默认颜色(#121212)上叠加带有不透明度的主要品牌色。这个案例中,界面深色#1F1B24是暗色主题默认颜色#121212和8%的品牌紫色叠加的结果。

 

 

 

科普一下,在显示纯黑色的时候,屏幕需要消耗更高的电量。为了节能,某些设备(例如带有OLED屏幕的可穿戴设备)可以关闭所有显示黑色的像素以节省电池电量。

 

 

使用调色板中较少饱和的紫色可以提高在深色背景中的易读性并减少视觉上的突兀

 

辅助色饱和度过高,和背景不融合

 

主体色

主体色是应用里最常显示的颜色。Material Design暗色主题使用原色的200色调(在所有背景和层级上均需通过WCAG的AA标准:文本和背景至少对比度达到4.5:1)。

 

 

暗色主题中的主体色示例:1.主要颜色 2.色调变体

 

主体色变体

在我们设计界面时,某些浅色界面上的组件需要使用主体色的变体。

 

这个暗色主题使用了主体色(紫色200)和主体色的变体(紫色700)

 

辅助色

大多数的时候我们都无法仅仅依靠主体色这一种颜色撑起画面,我们还需要辅助色。辅助色一般来说是主体色的临近色或互补色。在暗色主题中,辅助色可以用来显示用于突出的部分内容。当然,辅助色同样必须满足背景与文本4.5:1的对比度要求。

 

暗色主题中的辅助色调色板1.辅助色指示符2.色调变体

 

 

这个界面中使用了主体色和辅助色变体

强调色

在暗色的主题中,暗色占据了UI的大部分空间。而在暗色之上我们也会运用强调色。强调色通常是浅色或明亮的色彩,这样的颜色能让我们希望突出的元素在暗色中脱颖而出。

 

 

为了提升灵活性和可用性,建议在暗色主题中使用较浅的色调(200-50),而不是默认主题颜色(饱和色调范围为900-500)。1.默认主题原色指示灯2.暗色主题原色

 

选择色彩时要考虑饱和度对界面阅读的影响

 

 

暗色主题下顶部应用栏使用的颜色不可以是主体色

 

品牌色

为了保持品牌的识别性,品牌颜色可以在暗色主题中使用,但应当仅限于一个或两个品牌元素,例如Logo或品牌按钮。界面中的其他部分如文字和次要元素仍然可以使用饱和度低的颜色来设计。

 

 

1. 暗色主题色2.品牌颜色

饱和度很高的品牌色应用于FAB(2),而不饱和的暗主题色应用于文本(1)

 

暗色主题色板

我们设计一个产品的时候需要完成一套专属的色板,它包括:颜色(主体色、辅助色、主体色变体、辅助色变体)、表面(背景和组件)、状态(例如错误状态) 内容(排版和图像)等的色彩选择。

 

暗色主题的色板实例


 

1 Material Design默认主题色板 2 Material Design暗色主题色板


 

错误颜色

错误颜色在产品中用来指示错误状态,当看到这个色彩,用户就知道有些事情出错了。暗色主题的默认错误颜色为#CF6679。

 

这种颜色是通过默认的错误颜色(#B00020)并使用40%白色叠加来创建的,这种颜色通过了AA级对比度标准。


 


文本颜色

当浅色文本出现在深色背景上的时候时,应使用以下不透明度:高度强调的文本(87%)、中等强调的文本(60%)和禁用文本(38%)。

 

 

高度强调的文本、中等强调的文本和禁用文本的颜色

 

状态

通过使用叠加颜色来传达组件或交互元素的状态。在暗色主题中,状态应使用与其默认主题相同的叠加值,并且可以调整它们以通过AA级对比度标准。


 

悬停、聚焦、按下和拖动状态时组件的不同设计

 

使用什么软件设计?

Material Design旨在为设计师设计一套可以应用在所有平台的设计语言。在目前的UI设计界较为通用的软件都可以支持Material Design的设计,比如我们可以行业里比较流行的Adobe XD、Sketch、Figma等UI软件来设计界面。Material Design提供了暗色主题的Sketch文件,大家可以在支持Sketch格式的设计软件如XD、Sketch、Figma中打开它。

 

 

使用Adobe XD打开暗色主题模板

 


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


中后台界面设计流程剖析

ui设计分享达人



如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

中后台很难设计吗?需求PRD看不懂?或许看完这篇文章后,会有新的体会



拿到PRD的瞬间,你在想什么?

设计一个产品的前提是要先了解这个产品想要解决的是用户什么痛点,核心功能是什么,价值点在哪里等等。


整体需求概览,产品画布

先整体浏览下需求,对需求有个整体的认知,知道大概的框架,功能点是什么



思维导图,梳理需求


用白纸或XMIND将功能点梳理出来,最好是按照用一级菜单/二级菜单/三级菜单的模式,把整体的流程,页面的逻辑都整理出来


这是一个消化过程,从PRD一堆文字,消化成,自己可以理解图画


这一步当中,要把逻辑理顺,不懂的就问,千万不要用猜的,猜一猜,无限可能啊。一不小心,就给自己挖坑了。


如果产品是涉及到流程的,那就要把整个流程画出来。比如要设计审批系统的中后台。



如果PM已经事先画好流程图,可以自己先过一遍,然后用自己的理解再画一遍,然后对照看理解上有没有偏差,这样可以对整个流程流转有更深的理解


草图先行,原型跟上

前面两步完成后,可以说对产品的理解已经没有问题了。现在要把页面串起来,所以我建议先画草稿,不用很细致,要大致规划板块



注意一点,不需要所有页面,都需要画草图,这样时间上太长,把主要页面和流程的草图画出来,把前两步的理解用页面表现出来,验证流程上是不是有漏洞。很多时候可能整体流程看起来是闭环的,等到画页面的时候,会发现有漏洞的地方


关于原型的问题,如果是比较大的项目,建议还是先画原型,因为前期原型交互上修改的次数会比较多,那么设计师可以专注在整体页面流程上的把控,而不把时间放在颜色,icon,插画等视觉上的修饰。一个大项目前期的讨论,评审,修改个5-10次都挺正常的。


每次修改最好都更新下版本号,并在原型里面加个【更新记录】的页面,记录这次更新哪些内容,如果是大的更新,或者是功能的改变,最好写上原因,方便后期可查,因为时间久了,往后翻,真的会忘记。比起相信自己的记忆,还是烂笔头吧。我也碰到几次这样的坑,某次开会,去掉了某个功能,当时觉得不需要。后期又有人提这个需求,追溯到底是谁说不要的,结果怎么也想不起来。所以要做到记录可查。


如果产品前期有做竞品分析,建议把竞品分析的内容也写在原型里面。同时也把产品目标,用户痛点这些都可以写上去,这样让整个原型,可以更加完整,也更有份量。后期如果遇到类似的产品要设计,就可以去回顾下之前做产品的记录,考查的方向。


做原型时,可以对一些要点,进行补充,比如以下几点:


1. 新建页面,新建完成后,是跳转到哪个页面,这个需要说明,不然开发就只能用猜。

比如新建产品完成后,是到产品列表,还是到产品详情页,因为前期没有说明,开发就让页面跳转到产品列表,但是事实上,是要跳到产品详情。因为到详情页面,可以引导用户进行下一步操作。如果到列表页面,其实操作就被中断了,除非产品的需求是,不断建产品,但这种情况比较少


2. 有涉及到状态的列表

要在原型旁边补充说明并列出,所有状态。如果状态还会对应不同的操作,则需要把对应关系都列出来。同时界面中的列表,也需要把状态和操作对应,不要随意填写,以致于开发看漏或者看错了,要保持一致,减少错误发生。


或许你会认为开发在细分的时候,也会讲清楚状态的分类,各自的逻辑关系。但是,建议设计师多做一步,可以帮助设计师更了解产品,还有些特殊状态。而且自己碰到比较多情况是,前端也不清楚逻辑,结果在状态与操作的对应关系上来来回回一直在修改。个人的习惯是,如果设计稿可以呈现的逻辑,那就认真的画出来,减少后期开发的错误和来回沟通的时间。


3. 列表的排列顺序

按什么顺序排序,这也是个关键问题,按创建时间、更新时间,产品序号,优先级等等,不同的需求会不一样,所以不要去假设开发都知道


4. 表单校验

前端校验,还是后台校验?基本上现在都是前端校验,马上给用户反馈,而不是在用户填完一堆的表单后,告诉用户,哪里出错了。后台校验属于偏重的交互,容易给用户产生心理负担。


校验问题,还会涉及到报错文案。这个建议做个文档给开发,特别是刚合作的开发,也不了解对方的习惯,这样减少后期更改文案的时间。也可以做个报错规范,这样后期的报错就根据规范来就可以,不需要每次都来提醒。


5. 输入框提示文案

之前有人提到这个提示文案是非必要的,因为前面已经有说明,当前输入框是要填什么内容


加入提示语后,会让表单更丰富。而看右边的表单,空得让人有点慌...

特殊的字段,会需要特别的文案;比如版本号,业务方希望用户可以遵循某种规则去新建,则可以提示:请输入版本号,例:1.0.0;


视觉稿

原型评审没有问题后,就可以进行视觉的设计了。视觉稿上面,也同样需要一些交互的说明,虽然前期原型上已经有标注。但是对于开发来说,他要看着设计稿,又打开原型对着看,其实也是件挺讨厌的事。而且有些交互,是需要界面。比如下拉菜单样式、搜索框(涉及模糊查询)、进度条(失败和完成)等等。

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



UI设计师在项目各阶段该做些什么?

ui设计分享达人


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

文章从项目流程的各阶段来讲解UI设计师应该做些什么,如何做才能把自己的价值在项目中体现出最大化!

讲解对象:处于中小型公司项目的UI设计师(目前现状:相比起大厂的设计师来言缺乏流程和规范,也不懂系统的工作方法,容易陷入无人带+无人指导+无标准流程的尴尬境地,不知道如何在项目中体现出自己更大的价值,设计也没有自己的一套可支撑的体系,在项目实施过程中永远处于被动方)


注明:此次只分享一些大的方向,并不会具体讲解哪一块如何去实行,在一些重要的部分会稍微提一下,因为涉及的内容太多所以只能以后分块面来分享给大家。


OK,废话不多说,进入正题:

首先梳理了一个简化版的中小型公司项目流程与角色分工表(表格注明:一般中小型公司是没有交互设计师与用研的,交互设计的活儿都是交给产品经理来做,所以交互设计角色我把它归为产品经理;视觉设计会在后面重点强调所以简化说明;开发测试这一块与我讲解的内容关联不大所以也给简化说明了,但是在开发测试阶段会有更重要的任务让我们设计师去做,后面我会详细讲解)。

从上图中可以看出UI设计在项目中主要就是进行视觉设计这一块,但真的是这样吗?其实并不是,一位出色的UI设计师在项目的各个阶段都应该体现出自己的价值,特别是对于中小型公司,公司想要的是如何生存下去,就更需要团队里的每一个人在产品中创造更多的价值,而不是像流水线工人一样做完自己的事就什么都不管了,这样的团队是活不下去的,正因为这样,这也是我们设计师证明自己价值的一个机会,那么我们在项目各阶段该做些什么呢?


一:产品立项+交互设计阶段

因为主要讲解中小型公司,所以我把产品立项与交互设计放在一个阶段来讲,虽然这一阶段没有任何视觉可视化设计,但要体现设计师的价值这一阶段就是重要前提,那么我们怎么做呢?


1.查看迭代的产品文档,实时了解产品信息(一般中小型公司的产品立项已经成立,直接开始进入交互设计阶段)

目的:设计前提就是了解产品,这一点是最基本的。

延展:有助于后面协助UE“部分内容”的分析。

重点:着重了解这三大块:1.市场调研与客户需求分析。2.需求文档。3.产品特性概览及概要描述。


2.主动协助产品完成UE的“部分内容”,“部分内容”包含:市场分析/用户画像/痛点/竞品分析/使用场景(因为中小型公司的项目都比较赶,有些产品经理做UE这块内容的时候可能没考虑太多细节,有些内容没有去做,所以这时就可以协助产品主动去完成这些分析文档)

目的:有利于做视觉分析时提供更好的思路与决策,减少走弯路,减少不必要的沟通成本。

延展:对产品信息进行文字提炼,做一个有利于视觉团队理解的表格文档,方便做视觉稿时能直观的看到产品分析,也为了后期有UI新成员加入时更快的熟悉产品提供必要的文档。(表格没必要做的多好,简单直观才是最重要,后期再根据视觉风格统一优化)

表格示例:

重点:协助UE内容重点不在于帮助产品经理更细化的分析产品,重点是在此过程中能更好的拓展自己的知识面,提升自我的分析能力,为后期的视觉稿提供更好的理论支撑,以及对自己的岗位转型也具有很大帮助。


3.输出关于设计的竞品分析文档(协助完成UE内容后)

目的:作为视觉规范/界面视觉的参考,让自己的设计更具有说服力。

延展:如果有足够多的时间可以细化更多内容,进行对比分析,以便于后面做视觉稿时能快速进行布局决策。

重点:可以形成一套属于自己的竞品分析文档,以后可以套用到其他项目中,我个人的设计竞品分析文档是从4个层面/3种表现形式来进行分析的。4个层面为:表现层/框架层/结构层/范围层;3种表现形式为:分析列表;思维导图;图文结合。

给大家举三个不同形式的例子:

01-表现层+分析列表形式:

02-结构层+思维导图形式:

03-范围层+图文结合形式:

二:视觉设计阶段

这一阶段是设计师最熟悉的,也是很多设计师所痛心的,流程混乱会导致你做很多无用功,没有合理规范以至于进度提不上来,设计出的界面却说不出任何依据,也许我的一个设计思路能解决你们的难题。


第一步:根据产品文档与设计竞品分析文档确定视觉风格,根据视觉风格做出视觉概念稿(建议3版),确定好视觉概念稿后主视觉设计师针对主要功能界面设计风格定位稿。(设计风格定位稿必须要结合竞品分析文档来做,让自己的每一块设计区域都有据可循)


第二步:当出了定位稿后,就可以制定设计的周期节点(注:也可以制定周期后再确定风格定位稿,把定位稿归位节点内)


第三步:制定文件命名规范;确定设计规范(迭代);建立组件库(迭代)

1.文件命名规范:为了提高内部交接效率,尽量使文档的命名与层级统一

示例:

2.确定设计规范:设计规范并不是一步就能做好的,项目前做基本的设计规范,项目中进行迭代,项目结束后再进行总结输出最终档。

那么我们现在要做的就是项目前的基本设计规范,前期建议这些规范是必须要的:统一设计环境/字体/行高/界面栅格/颜色/icon制作规范/输出规范/最小基础间距/按钮。(规范没必要一次性就想做的非常完美,在设计中都是要不断迭代的)

3.建立组件库:组件库是通过对功能及视觉表达中元素的拆解、归纳、重组;并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,將这些组件整理在一起,便形成组件库。简单来说就是可复用/节省产出时间/视觉统一,加快我们的设计步伐,让我们把更多时间用于专注于用户体验和对产品的创新。(注:组件库也是需要不断的迭代的,在项目完成后可以把组件库归位设计规范文档里面)


第四步:规范设计流程

根据每个项目不同/每个公司不同设计流程都有些不同变化,规范设计流程包含这三块:设计组交付流程;产品交付流程;前端交付流程。

目的:直接减少了因时间有限导致的设计误差及衍生的研发返工,为项目的高质量交付奠定了基础。


第五步:视觉稿设计+视觉稿交付

视觉稿设计:设计视觉稿是为了让自己的视觉稿有据可行,需要结合产品文档/竞品分析文档/设计理论这三大块来作为依据参考进行设计。

视觉稿交付:与开发商讨出最佳交付方案,统一输出规范。


三:开发测试阶段

这一阶段属于设计的一个空档期,很多设计师在这一阶段都开始了休闲时光,只是做一些查缺补漏的工作,其实这一阶段对于设计师来言是一个体现自我价值的重要阶段,那么我们应该怎么做呢?


1.与前端工程师经常沟通,查查看写出的界面是否有偏差(因为有些情况下程序写出来的界面与你所做的界面有偏差,如果不经常沟通,那么他在做同样组件时也会犯同样错误,有问题及时纠正,免得来来回回耽误工作进度)


2.重点:总结输出设计文档(定稿设计规范/定稿竞品分析文档)

①定稿设计规范第一版:包含设计过程中所有迭代的规范内容以及组件库

作用:对于设计师而言是展现业务能力的体现,对于整个团队而言是提升生产效率的重要工具。

②定稿竞品分析文档(设计类)第一版:把项目中所有的竞品分析文档归类,以及因时间问题某些板块未做的竞品分析加入迭代,综合输出最终档。

作用:简单来说就是更快为设计提供具有可行性/有依据性的视觉稿。


四:上线阶段

作为最激动人心的阶段,为了避免上线后不必要的错误以及产品后期的迭代考虑,还是有许多工作需要做的。

1.交付物走查(排查交付给开发的文件,查看是否有图标/界面/提示信息等的遗漏)

2.验收工作(界面是否与高保真原型图保持一致,图片是否正常显示,打开界面速度是否正常,动效是否达到预期等)

3.后续延伸(因项目时间原因UI样式/交互/情感化设计还没做到更细致,可提上日程留至于下期改版。

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


设计精致的UI界面-排版篇

ui设计分享达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

前言



从本周开始,接下来时间里,会和大家分享如何创建精致的UI界面,共五部曲,为什么要做这个分享?曾经我学习UI设计时,网上资料很多,但是参差不齐,对于新人而言,这是很痛苦的,进步慢。因此我想通过之前踩过一些坑,集合自己的工作经验,把一些知识点分享出来。

分享的最终目的是沉淀自己,同时也希望能给有想要提升排版能力的设计师带来一些帮助与启发!所以本系列文章并不一定适合所有人。

那么本周就先从排版篇幅开启….




为什么要学习排版



排版是界面设计中最难的部分,也是非常重要的一部分,它以各种形式存在界面中,纯文本排版,图形文排版,图片文本排版等等,这是我们在做设计时候,经常会面临的问题,好的排版能有效地向用户传递关键的信息,同时也能提升产品使用体验。在我们日常生活中,离不开设计排版,包括经常见到的各种广告与电影宣传海报,如果不能让用户在短时间内记住关键信息,这个设计就是失败的。因此我希望通过今天这篇文章,能够让你对排版有一些新的认识。




提升设计排版有哪些方法



在界面设计中,影响排版设计的因素有很多,我总结归纳了7个维度(当然还有其他更细的,在这里就先暂时不讲),它直接影响整个排版质量,这些方法当然不是绝对,但是如果能巧妙综合得运用到界面中,能保证大部分界面设计感得以提升,当然也是需要不断刻意练习来提高的。


分别是:

  1. 合理运用空间的力量

  2. 大小的力量

  3. 论颜色的重要性

  4. 对齐的力量

  5. 平衡定律

  6. 选择好的字体

  7. 清晰了解设计目标


下面我会集合一些案例来和大家讲解下





合理运用空间的力量



空间即我们常说的留白,当设计元素紧紧地聚集在一起时,界面看起来没有重点,因此需要和谐的运用它,空间的运用规则直接影响产品的性格,小空间和大空间在视觉感受上,两者完全不同,那么我们在界面设计中如何去更好的运用空间来设计排版。

有一个很好的方法就是可以运用网格去搭建空间,在平面设计中,运用得非常多,那么在用户界面中,同样也可以运用网格去搭建,下面看一个案例





如上图作者把一个界面分为4Gird,通过搭建好的网格来进行界面中元素排版,右侧是我拆解的图(备注:网格的搭建并没有任何强制性的规定需要搭建多少列,最终的搭建列数需要根据这个产品内容复杂程度去定义的)比如我最近在做车载HMI设计语言,同样也运用了网格,那么我会根据整个车载HMI产品复杂程度去搭建,同时也运用了几种网格配合使用。




上面两个例子我们可以发现 设计师运用了大空间来设计界面,这使得整个界面呼吸感更强,更透气,因为也是娱乐类偏杂文产品,所以设计会偏艺术化一些。



韩国29cm产品是我比较喜欢的一个app,整体设计呼吸感很强,留白空间大,视觉焦点清晰





大小的力量


我们都知道大的物体更吸引眼球,更容易引起我们的注意,那么在设计中,我们一般都会将重要元素放大,突出显示,


a和b那个更吸引你?答案是a.  因为a类型排版看起来很大,更具有吸引力





上面案例中算是大小方法上运用比较好的,我们可以看出视觉层次非常清晰了 ,首先我能快速知道哪些重要信息,肯定是封面图,接着左上角logo,然后就是导航和标题了,最后就是针对每个内容块的一些详细文案解释。




简单示例,重要的信息一定要大,次级信息弱化。






论颜色的重要性



颜色在排版设计中起着很大的作用,能起到点睛之笔,又或者为画面带来活力,又或者代表着品牌,当然我们在UI界面中字体颜色一定要慎用,因为不同颜色含义是不同的。合理恰当运用颜色, 能够瞬间提升设计品质感。




上面这个web设计中,设计师通过红色来强调重要信息,同时也让灰白的画面有了些许不同之处。




对某些文本使用辅助颜色,例如链接文本,图1 使用方式正确。图2将颜色大量使用在正文,严重影响视觉体验




上面两图都在恰当时候使用颜色,比如打开开关按钮,又或者输入文本高亮显示等,右侧只有在选择文本阶段,使用颜色提示




避免像图2那样使用对比度低的颜色



少量颜色能提升界面品质感,在关键的地方使用品牌颜色或者辅助色其他通过我们前面讲的大小对比和空间来完成整体界面设计





对齐的力量



对齐是界面设计中我们经常提到话题,也是提升界面品质感最重要的一个隐形的力量,也许有时候我们会忽略他,有时候会不经意间就没做好。




对齐的界面比不对齐的要整齐很多,视觉流也符合用户阅读习惯




我们可以借用前面所学的网格来对齐,这样不仅设计有节奏感, 同时画面很整齐美观




我们界面设计中可以有三种思路对齐方式,当然根据业务板块去选择合适的对齐方式,三种对齐方式都有一个隐形的轴(看我标的线),然后围绕这个去排版设计,自然形成一个规则的视觉流




上面案例中作者整体偏左对齐,这样形成以左为中心一个轴展开视觉流走向





平衡定律



我们在做界面设计时候,会经常遇到有人说你的设计,要么是这边太重了,要么就是太轻了,或者这边要不加点东西进去,不然太空了,为什么?这就是平衡定律,如果同一个环境下的物体没有保持平衡关系,我们视觉感受上是很不舒服的。下面我们看几个例子


图1和图2 我们可以看出; 图2 给人第一感受就是不平衡的,整体视觉重心偏左了 




上图案例,设计师通过按钮来平衡整个画面视觉重心,因为左侧内容多,如果按钮很弱或者很小,是很难平衡画面的,因此我们做界面时候,定义一些按钮大小也是非常考究的




左边视觉界面,右边拆解原型出来,我们可以看到设计师也是通过元素合理分布使得界面整体平衡






选择好的字体  



字体选择对界面排版非常至关重要,这也是所有界面排版中必要的一步,不同字体有不同的性格属性,我们需要根据产品来选择恰当的中英文字体,同时,也需要记住,一个产品APP界面设计中,字体最好不要超过两种

推荐一些我认为2019比较好用的英文字体,大家做概念设计时候或者提案方案包装时候是可以用到的哦(吐血推荐)


字体:Montserrat       字体:Nexa 



字体:Futura         字体:Playfair_Display 


中文好用的字体,大家应该都知道,平方字体,思源黑体,汉仪旗黑,兰亭纤黑,我就不做示例了。






清晰了解设计目标



终于到最后一趴了,最后这点是整个设计排版的核心之一,为什么?如果不清晰设计目标,那么整个排版风格也许最后产出和你用户群体或者产品性格是两种类型的,不同产品风格会有不同的排版style

比如我们产品是品,那么整体排版设计风格一定是使用大网格,大空间去设计,字体纤细等。如果是简约现代呢?又或者母婴产品,科技产品,娱乐产品等等,每个会有一些特殊排版思路。所以了解你的设计目标,并确定设计原则。

有了这些原则与目标,那么接下来就是开始找参考,找灵感找到对应产品他们是如何排版,如何控制画面节奏感的,推荐多去使用pinterest或者behance






总结


通过七大点排版思路,可以更好的运用在界面设计中,每个排版原则并不是独立的个体,他们之间是相辅相成的关系,比如大小离不开网格,也离不开对比,颜色等等,缺乏某些元素,那么界面就会缺失灵魂,设计产出质量并不好!好了本期到这里结束,下期会继续和大家分享如何巧妙运用图形提高界面品质感和增强细节!


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

Material Design数据可视化指南

ui设计分享达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

写在前面

2019年6月18日Material Design更新了设计指南中数据可视化部分,这是谷歌数据可视化团队形成的一套全面的数据可视化指南, 涵盖了设计原则、图表分类、图表的选用、样式设计、交互设计、仪表板设计等方面。个人阅读后进行了翻译,希望能够分享给更多对数据可视化有兴趣的设计同学!


全文章节目录:

原则

类型

选择图表

样式

行为

仪表板




数据可视化

数据可视化就是用图形描绘信息。




原则

数据可视化是一种以图形描绘密集和复杂信息的表现形式。数据可视化的视觉效果旨在使数据容易对比,并用它来讲故事,以此来帮助用户做出决策。


数据可视化可以表达不同类型和规模的数据,包括从几个数据点到有大量变量的数据集。

Image title





类型

数据可视化可以以不同的形式表达。图表是表达数据的常用方式,因为它们能够展示和对比多种不同的数据。


图表类型的选择主要取决于两点:要表现的数据和表现该数据的用意。该指南描述各种类型的图表及其用例。


图表类型


1. 随时间变化

随时间变化的图表显示一段时间的数据,例如多个类别之间的趋势或比较。


常见用例包括:

股价表现、卫生统计、年表

Image title



2. 类别比较

类别比较图表是多个不同类别数据之间的比较。

常见用例包括:

不同国家的收入、热门场地时间、团队分配

Image title



3. 排名

排名图表显示项目在有序列表中的位置。

常见用例包括:

选举结果、性能统计

Image title



4. 占比

占比类图表显示了局部与整体的关系。

常见用例包括:

产品类别的综合收入、预算

Image title



5. 关联

关联类图表显示两个或以上变量之间的关系。

常见用例包括:

收入和预期寿命

Image title



6. 分布

分布类图表显示每个值在数据集中出现的频率。

常见用例包括:

人口分布、收入分布

Image title



7. 流程

流程类图表显示了多个状态之间的数据移动。

常见用例包括:

资金转移、投票计数和选举结果

Image title



8. 关系

关系图表显示多个项目之间的关系。

常见用例包括:

社交网络、词图

Image title






选择图表

面对多种类型的图表,以下指南提供了关于如何选择合适的图表见解。



显示随时间的变化

可以使用时间序列图表来表示随时间的变化,就是按时间顺序表示数据点的图表。表示随时间变化的图表包括:折线图,柱状图(条形图)和面积图。


Image title

*基线值是y轴上的起始值。



柱状图(条形图)和饼图

柱状图(条形图)和饼图都可用于显示比例,表示部分与总体的对比。

· 柱状图(条形图)使用共同的基线,通过条形长度表示数量

· 饼图使用圆的圆弧或角度表示整体的一部分


柱状图(条形图),折线图和堆叠面积图在显示随时间的变化方面比饼图更有效地。由于这三个图表都是使用相同的基线,因此可以更轻松地根据条形长度比较值的差异。

Image title



面积图

面积图有多种类型,包括堆叠面积图和层叠面积图:

· 堆叠面积图显示多个时间序列(在同一时间段内)堆叠在一起

· 层叠面积图显示多个时间序列(在同一时间段内)重叠在一起


层叠面积图建议不要使用超过两个时间序列,因为这样做会使数据模糊不清。取而代之,应当使用堆叠面积图来比较一个时间间隔内的多个值(横轴表示时间)。

Image title





样式

数据可视化使用自定义样式和形状,使数据更容易理解,以适合用户需求。


图表可以从以下方面进行优化:

· 图形元素

· 文字排版

· 图标

· 轴和标签

· 图例和注释



不同类型数据的样式设计

可视化编码是将数据转换为可视形式的过程。独特的图形属性可应用于定量数据(如温度,价格或速度)和定性数据(如类别,风味或表达式)。


这些图形属性包括:

· 形状

· 颜色

· 大小

· 面积

· 体积

· 长度

· 角度

· 位置

· 方向

· 密度



不同属性的表现

多个视觉处理方法可以综合应用于数据点的多个方面。例如,在条形图中,条形颜色可以表示类别,而条形长度可以表示值(如人口数量)。

Image title

形状可用于表示定性数据。在此图表中,每个类别由特定形状(圆形,正方形和三角形)表示,这样可以在一张图表中轻松实现特定范围的比较,同时也可以进行类别之间比较。



1. 形状

图表可以运用形状,以多种方式展示数据。形状的设计可以是有趣的、曲线的,或者和高保真的等等。


形状程度

图表可以展示不同精度程度的数据。用于细致研究的数据应该用适合交互的形状(在触摸大小和功能可见性方面)展示。而旨在表达一般概念或趋势的数据可以使用细节较少的形状。

Image title



2. 颜色

颜色可用于以四种主要方式区分图表数据:

· 区分类别

· 表示数量

· 突出特定数据

· 表示含义


颜色区分类别

Image title

例:圆环图中,颜色用于表示类别



颜色表示数量

Image title

例:地图中,颜色用于表示数据值。



颜色突出数据

Image title

例:散点图中,颜色用于突出特定数据。



重点区域

在不滥用的情况下,颜色可以突出焦点区域。不建议大量使用高亮颜色,因为它们会分散用户注意力,影响用户的专注力。

Image title



颜色表示含义

Image title



无障碍

为了适应看不到颜色差异的用户,您可以使用其他方法来强调数据,例如高对比度着色,形状或纹理。

将文本标签应用于数据还有助于说明其含义,同时消除对图例的需求。



3. 线

图表中的线可以表示数据的特性,例如层次结构,突出和比较。线条可以有多种不同的样式,例如点划线或不同的不透明度。


线可以应用于特定元素,包括:

· 注释

· 预测元素

· 比较工具

· 可靠区间

· 异常


Image title



4. 文字排版

文本可用于不同的图表元素,包括:

· 图表标题

· 数据标签

· 轴标签

· 图例



图表标题通常是具有最高层次结构的文本,轴标签和图例具有级别的层次结构。

Image title



字重

标题和字重的变化可以表达内容在层次结构中的重要程度。但是应该保持克制,使用有限的字体样式。

Image title



5. 图标

图标可以表示图表中不同类型的数据,并提高图表的整体可用性。


图标可用于:

· 分类数据:用于区分组或类别

· UI控件和操作:例如筛选,缩放,保存和下载

· 状态:例如错误,空状态,完成状态和危险


在图表中使用图标时,建议使用通用可识别符号,尤其是在表示操作或状态时,例如:保存,下载,完成,错误和危险。

Image title




6. 坐标轴

一个或多个坐标轴显示数据的比例和范围。例如,折线图沿水平和垂直坐标轴显示一系列值。

Image title



柱状图(条形图)基线

柱状图(条形图)应从为零的基线(y轴上的起始值)开始。从不为零的基线开始可能导致数据被错误地理解。

Image title



坐标轴标签

标签的设计应体现图表中最重要的数据。应根据需要使用标签,并在UI中保持一致性。他们的出现不应该妨碍查看图表。

Image title



文字方向

为便于阅读,文本标签应水平放置在图表上。


文字标签不应该:

· 旋转

· 垂直堆叠

Image title



7. 图例和注释

图例和注释描述了图表的信息。注释应突出显示数据点,数据异常值和任何值得注意的内容。

Image title

1. 注释

2. 图例


在PC端,建议在图表下方放置图例。在移动端,将图例放在图表上方,以便在交互过程中保持可见。



标签和图例

在简单图表中,可以使用直接标签。在密集的图表(或更大的图表组的一部分)中,可以用图例。

Image title



8. 小显示屏

可穿戴设备(或其他小屏幕)上显示的图表应该是移动端或PC端图表的简化版本。

Image title





行为

图表具有交互模式,使用户可以控制图表数据。这些模式可以使用户专注于图表的特定值或范围。


以下推荐的交互模式,样式和效果(如触觉反馈)可以提高用户对图表数据的理解:

渐进式披露

提供了按需求逐步展示详细信息的明确途径。

直接操作

允许用户直接对UI元素进行操作,最大限度地减少屏幕上所需的操作数量,包括:缩放和平移,分页和数据控件。

改变视角

使一种设计可以适用于不同的用户和数据类型,例如数据控件和动效。


1. 渐进式披露

使用渐进式披露显示图表详细信息,允许用户根据需要查看特定数据点。

Image title


2. 缩放和平移

缩放和平移是常用的图表交互,会影响用户对图表数据深入的研究和探索。


缩放

缩放改变界面显示的远近。设备类型决定了如何执行缩放。

· 在PC端,通过单击、拖动或滚动进行缩放

· 在移动端,通过捏合进行缩放


当缩放不是主要操作时,可以通过单击和拖动(在PC端)或双击(在移动端)来实现。


平移

平移让用户能够看到屏幕之外的界面。它应该合理的展示数据的价值。例如,如果图表的一个维度比另一个维度更重要,则平移的方向可以仅限于该维度。

· 平移通常与缩放功能同时使用。

· 在移动端,平移通常通过手势实现,例如单指滑动。

Image title



3. 分页

在移动端,分页是一种常见模式,让用户通过向右或向左滑动来查看上一个或下一个图表。

Image title

在移动端,用户可以向右滑动以查看前一天。



4. 数据控制

可以使用切换控件,选项卡和下拉菜单筛选或改变数据。

用户调节控件时,这些控件还可以显示指标。

Image title

切换控件,选项卡和下拉菜单可以更改或筛选数据。



5. 动效

动效可以强化数据之间的联系,提升交互体验。应该有目的地使用运动(不是装饰性地),表达不同状态和空间之间的联系。

运动应该是合理,平稳,反应灵敏,不会妨碍用户的使用。

Image title在此示例中,图表数据从按天显示动态切换到按周显示。转换期间不会显示所选日期范围之外的数据,从而降低了复杂性。



Image title动画能够体现两个不同图表的相关性。



6. 空状态

图表数据为空的情况下,可以提供相关数据的预期。

在合适的情况下,可以展示角色动画创造愉悦和鼓励。



Image title有特色的动画提升了空状态的效果。







仪表板

在称为仪表板的UI界面中,数据可视化通过一系列图表实现。多个独立的图表有时可以比一个复杂的图表更好地表达故事。



仪表板设计

仪表板的目的应在其布局,样式和交互模式中体现。无论是用来制作演示文稿还是深入研究数据,它的设计应该适合它的使用方式。


仪表板应该:

· 突出最重要信息(使用布局)

· 根据信息层级确定信息的焦点(使用颜色,位置,大小和视觉权重)


Image title

应根据对数据的需求确定信息的优先级并进行安排。在此示例中设计仪表板,考虑了以下用户问题:

1. 需要注意的问题
2. 发生问题的时间

3.发生问题的位置

4.受问题影响的其他变量



1. 分析类仪表板

分析仪类表板让用户能够研究多组数据并发现趋势。通常,这些仪表板包含能够深入洞察数据的复杂图表。


用例包括:

· 随时间变化的突出趋势

· 回答“为什么”和“假设”的问题

· 预测

· 创建有深度的报告


分析类仪表板示例:

· 跟踪广告活动的收效

· 跟踪产品在其整个生命周期中的销售额和收入

· 随时间变化的城市人口趋势

· 跟踪随时间变化气候数据


Image title

分析类仪表板显示气候数据



2. 操作类仪表板

操作类仪表板旨在回答一组预设的问题。它们通常用于完成与监控相关的任务。

在大多数情况下,这些类型的仪表板具有一系列关于当前信息的简单图表。


用例包括:

· 跟踪目标的当前进度

· 实时跟踪系统性能


操作类仪表板示例:

· 跟踪呼叫中心的活动,例如呼叫音量,等待时间,呼叫长度或呼叫类型

· 监控在云端应用程序的运行状况

· 显示股市情况

· 监控赛车上的遥测数据


Image title

操作类仪表板显示设备存储指标



3. 演示类仪表板

演示类仪表板是为感兴趣的主题提供的展示视图。

这些仪表板通常包括一些小图表或数据卡片,用动态标题描述每个图表的趋势和见解。


用例包括:

· 提供关键绩效指标的总览

· 创建高级执行情况的概要


演示类仪表板示例:

· 提供投资账户绩效的总览

· 提供产品销售和市场份额数据的概要


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

Control Center「元辰」数据概念控制中心

ui设计分享达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

「元辰」数据概念控制中心,基于真实的使用场景和概念的表现手法,打造的企业及个人后台数据管理系统。

主要分为首页概览、作品编辑、信息收集、数据统计和常规配置等,简单的动效使操作回馈有了更好的交互体验,且真实可依。

-

「元辰」注重真实的数据体验,致力把数据信息通过大屏实时简洁、有效的传达给使用者。针对精准用户“迅速获取信息、简化操作流程、减少学习成本”,我们将这些问题作为传达的核心要素,一直贯穿始终。

-

欢迎沟通探讨、合作交流。

请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图

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

设计的法则【交互篇】

ui设计分享达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

让设计更有说服力

目录:


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

视觉层级强力拆解

ui设计分享达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

自从上一篇发文得到一些发表方向,以后决定以个人独特的总结以及符合商业的思维逻辑来写作设计拆解的相关文章教程,前期我还是按大类去诠释我的整个想法,看看大家的反馈,如果理解门槛还是有很大障碍,我在后期的文章中会再将文章细化出来。


拆解分类

拆解1、视觉面积的影响

拆解2、明度对比的影响

拆解3、色彩的影响

拆解4、视觉位置的影响

拆解5、丰富层度的影响

拆解6、其他(浮层、常用点、角标、动效)




拆解1、视觉面积的影响

视觉面积越大层级越高,而且与比较层的面积倍数有关,参考层如果为1级,那比较层的等级是由和参考层的倍数有关,大一倍那就为2级,大两倍那就是3级,依次类推。这是美术基础中的近远的关系,越靠近的视觉点越大,越靠远的视觉点越远,这样也很容易知道,越近获得关注越高,越远越低。

界面举例我们告一段落,这里再说一下比较常遇到的文字视觉面积,这块很容易被忽略,其实文字也是具有视觉面积的,而且有不同的视觉大小。接下来我会将所有可能性都拆解出来。


同字号大小,不同粗细层度的影响/文字的边宽形成的格式塔大小就是文字面积,但不一样的是,文字是线性结构,所以他不是实面,而是虚面,所以它相对于实面来说还是低一个等级,再说回到粗细的层级比较,越粗的文字他是越靠近实面的,所以这就能判断越粗的文字层级越高这个道理。


同粗细,同字号大小,一个是有文字底块,一个没有,这样有文字底块的视觉层级会比没有文字底块的视觉层级要高,因为有底块相当于为实面,这样就比没有文字底块的层级要高了


同粗细,不同字号大小,这个不难理解,这个不存在实面虚面的概念了,因为都是一样的粗细,但是这个格式塔大小不一样,也就是说,格式塔越大的层级越高,字号越大的层级越高。


拆解2、明度对比的影响

明度对比越高的视觉点会比明度对比低的视觉点视觉层级要高,这里其实也是美术基础中的空间的视觉差,越远的物体越模糊(对比小),越近的物体越清晰(对比大)。所以对比大的层级会比对比小的层级会高。(这里插一句,色相也是有明度的,不同的色相也是有不同明度解析,这个可以运用到电商banner的配色上)

下面来看看文字和背景不同对比度对视觉层级的影响。我们将统一文字大小和粗细,背景为白色。


拆解3、色彩的影响 

有色的视觉点总会比无色的视觉点更吸引人,因为色彩也是美术的一类,给没有色彩的视觉上色是提升视觉体验的一步。

文字为例:同等大小同等粗细同等明度的字,有颜色的字体会有更大的关注点。

拆解4、视觉位置的影响

给界面一个横轴和纵轴,从横轴的左边到右边起视觉层级逐渐减弱,从纵轴的上到下边视觉层级逐渐减弱。这是因为用户阅读习惯的问题,人们习惯从左上方开始往右边阅读,然后慢慢的往下读取信息。

拆解5、丰富层度的影响

丰富层度越高的视觉层级越高,丰富层度越高的点信息量越大,越需要花时间停留。

文字为例:设计过的字体丰富层度会比默认字体高,所以有些需要强调的标题或者banner上的字体都是有精心设计过,为了拉开于界面的层级。

界面为例:界面首页中的banner是丰富层度最高,其次是金刚区,再是标签栏。

拆解6、其他

除了上诉的主要层级影响,还有其他一些特殊的影响,我这就说两三个子吧。一个呢是给模块直接加投影,硬生生的造成前后层级。还有角标的影响,在干净的页面中突然来个提示角标,例如微信有消息时的小角标。还一个就是用户常用关键点,那个视觉层级整个产品中的最高层级,这个需要打破所有规则,这个是由用户主动选择的视觉层级点,例如电商软件的搜索框,不管这个搜索框大小如何,层级怎么低都行,但对于用户进来,第一个渴望的点就是这里,最后是动效的影响,每个动效就是一个互动,动的东西永远比静止的东西有活力更加吸引人。

图片来源UIGREAT的作者JGM



总结


视觉层级的梳理可以很大幅度的提升视觉规范和用户体验,通过视觉层级的分析,可以从不同方面去诠释复杂的页面,也可以更好的去处理文本关系。

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


日历

链接

个人资料

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

存档