首页

这个简单的界面我是这样进行修改的

seo达人


图片

下面通过发现问题和案例修改来进行分析(案例来源于黑马家族内部学员的初次作业)。

 

发现问题

好了,看完修改前后的对比之后,我们开始进一步分析,从上到下一起来看一下吧!

 

头部导航栏区域

功能层面来说,发布既然运用高亮的处理,证明该功能是相对比较重要的,放在手势盲区操作体验不是很友好。

图片

右侧的两个功能图标距离太近,点击过程中容易造成误操作,两个图标的视觉不平衡,不能以高度来定标准,要看整体的面积占比。

图片

最后,发布、搜索、功能图标之间的间距没有做规范设计,导致设计不够严谨,视觉协调度和节奏感没有呈现出来。

图片

 

顶部分类导航区域

这个部分问题不是很大,类别之间的间距可以适当增加,如果是可以左右滑动的,末尾最好再新增一个,把可滑动的样式体现出来。

图片

 

Banner 图区域

轮播 Banner 图采用通栏的处理,会将整个界面一分为三(头部区域、Banner 区域、作品区域),如果界面边距较大的时候,这样处理不是很理想,会使得整个界面不够连贯。

图片

轮播点的处理不建议使用灰色来表现,不仅区分不明显,配色上面也显得不够干净整洁。

图片

Banner 图本身的质量也是需要注意的,站在输出作品的角度来说,图片的质量会影响整个作品的气质。而且这个图没有任何主题,设计的真实感无法得到体现。

图片

 

作品(菜谱)区域

整个界面篇幅较大的区域就是推荐的各类菜谱,第一眼看过去,是不是图片显得没有食欲啦!针对美食类作品,只有食物本身的食欲感才能吸引用户去点击学习。

图片

菜谱名称、作者信息、收藏与收藏数的显示亲密关系处理不合适,关联性被分断了。

图片

间距留白没有掌握好数字关系,显得比较拥挤。直角的封面图显得有些生硬,亲和力不是很强。

图片

 

底部标签栏

底部标签栏最主要的就是图标设计,图标设计的规范性需要注重一下。比如针对线性图标来说,描边粗细的统一、圆角值的统一和风格的统一等需要重点对待。

图片

其次就是点击状态和默认状态的区分,图标利用颜色深浅进行区分也是可以的,文字区域的区分也需要进行深浅的对比。

图片

以上便是针对这个界面发现的一些在 UI 层面的问题,接下来我们一起针对这些问题进行修改。

 

案例修改

针对罗列出来的问题,下面进行一些修改,设计属于主观表达,仅代表黑马哥自己的想法。不足的地方欢迎大家留言指正,互相进步。

 

头部导航栏区域

为了方便用户发布内容,我将发布按钮移出导航栏,放置在底部标签栏。将右侧的两个功能图标拆分为左右两侧布局,优化了间距和布局细节。

图片

功能图标绘制上面三条横线做了长短变化,显得更灵动。整体图标的高度要比通知图标的小一点,以此来平衡它们之间的面积差异。

图片

 

顶部分类导航区域

这个部分优化了文字之间的间距,然后通过字体大小和颜色深浅来区分点击和默认状态的差别,将短线装饰改为弧线,弧线作为符号基因运用到底部标签栏的图标设计中,这里是作为视觉符号的延续。

图片

 

Banner 图区域

轮播 Banner 图本身没有做,本期案例只是 UI 层面的修改。优化了 Banner 图的比例,采用 8:3 的比例进行计算,取 4 整除的高度数值。轮播点的设计通常有数字、小圆点、小短线、进度形式等,这里采用进度形式来表达。

图片

 

作品(菜谱)区域

这个部分调整比较大,从内容到布局结构都做了调整。首先将固定尺寸的封面图改为宽度固定高度自定义的瀑布流设计,满足用户的不同拍摄需求,对图片设置了圆角处理,增强亲和力。

图片

将标题、作者信息、收藏数据统计等信息进行整合,集中布局展示,增加内容之间的亲密关系。新增了标签,由于菜谱种类较多,通过标签更容易搜索到同类菜谱。

图片

收藏图标加数字来体现之前的文字表达形式,用户更容易理解,采用爱心图标既能表示喜欢也能带有收藏的作用,点击欲更强。

图片

单行标题适配为最多两行显示,方便用户为自己的菜谱名称增加修饰词。这里需要考虑最大值的情况,设计的时候需要体现出超出最大值的设计样式。

图片

最后就是选择了拍摄质量更好的图片来填充,作为作品输出来说,配图的质量还是至关重要的。来看一下这个部分的最终效果,对比一下就可以感受出前后视觉感的差异。

图片

 

底部标签栏

将发布按钮布局在中间位置,做突出形式,吸引用户发布内容,丰富平台的作品量和提高用户参与度。可以布局在标准的底部标签栏内部,也可以做凸出显示,这里尝试了两个版本。

图片

优化了图标设计,统一了描边值和圆角值,用小弧线作为视觉符号进行点缀。点击状态换成面性图标,区分更加明显,显得也更为成熟稳重。文字需要体现当前状态和默认状态的差异,这里使用品牌色来区分,也可以使用深浅不同的灰色来体现。

图片

 

完成

通过对发现的问题进行调整之后,完成了最终的设计案例优化。这个案例比较简单,通过案例想要说明的点是:无论简单还是复杂,都要考虑好每一个细节的深入,也要对每一个元素的设计有自己的设计想法。每一个界面都要体现出设计规范、设计质量和自己的设计态度,只有作品成熟才能说服别人,获得认可。

图片

本次案例修改的大体流程是:分析问题所在、组织优化思路、调整内容结构、设计高保真原型、填充内容完成最终 UI 稿。

图片

最后,感谢大家的阅读学习,希望对大家能有一定的帮助,后续将会继续带来更多案例的修改分析,我们互相进步。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》这个简单的界面我是这样进行修改的

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

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

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

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



配色 | 总监说颜色丑,我调了调确实好看多了!!

seo达人


图片 
我曾经也碰到过这个问题,在动手之前,或许脑海里会有个大致的色彩感觉。但实际上软件一操作,发现怎么配都很难配出特满意的色彩。
其实这种属于正常现象,更多的是经验层面的缺乏,只要多练习,慢慢的这种眼高手低的感觉就会越来越少。
图片 
并且练的多了后,发现配色真的没那么难,只要有一点积累,有一点审美,稍微掌握一点方法,就能让自己在配色的能力上有个很大的改善。
图片 
审美跟积累很早之前的文章里头其实就说了,可以多建几个画板,把不同的色彩归类收集起来,分析这些色彩的饱和度及明度,逐渐感受到色彩的张力。
 
图片
图片 
人有着很强的适应环境及学习能力,比如你在一个地方呆长了,其实口音也会越来越接近当地。
审美也是一样,只要你不断地去收集、积累那些真的很美的图片,那么你的审美也会发生改变,自然也会越来越高。
比如以前你认为这样的配色就很美,视觉冲击力强
图片 
但后面慢慢发现,原来这种平淡的才是惊艳之作,非常的耐看。
图片 
审美提升上来了,其实剩下的就是靠大量的练习以及方法的积累。练习也很简单,无非是多做一些Redesgin,多做一些概念方案。
Dribbble上也有非常多的案例可以参考,比如下面这种
图片
提升审美需要依靠点滴积累。
而方法的积累,其实真的就是三点。只要把这三点掌握好了,配出来的颜色都不会太low,显得较为高级。 
 

第一点:颜色不要花

有些同学总是认为配色嘛,肯定要多配几种颜色,才会美。
但其实错了,颜色配的越多,越显得脏乱,并且对设计师的色彩能力也要求越高,ta必须要把所有的颜色选到一个最大的公约数,搭配起来才能非常时尚。
图片
一般能像上面这样的,能同时hold住三种颜色同时在一个画面上的,大多数也都是王者段位了。
如果自己作为青铜、白银级选手,我建议还是首先要从控制颜色的数量还是入手。 
 
控制的不好,就是下面这个例子:
图片 
总结:控制色相数量,增加色彩明度梯制  
先把颜色的明度系数理解到位了,再理解不同色相带来的情绪。同一个画面色彩越多,越难掌控,而且也会让人视线越不知道放哪,产生一种烦躁焦虑感。
比如看看这些作品,高级都是因为色彩被控制的很好
图片
图片
图片 
再来几组比较花的,是不是就要掉档次的多?
图片
图片 
 

第二点:不要脏。

好看的颜色会让人引起共鸣,不好看的颜色一眼都不想再看。脏脏的颜色会让人觉得这个东西不高级,不够养眼。
那么什么颜色会显得脏?带大家看几个辣眼睛的:
1、饱和度中性的重色 ❌
图片 
2、饱和度过高的中性色 ❌
图片 
3、饱和度过低的浅性色 ❌
图片 
上面这几种辣眼睛的情况,咱们要尽量避免。
 
重色要么为偏灰色,要么带强颜色属性;中性色饱和度尽量需要往下收,收到直到比较温和为止;浅色的色彩尽量明快饱和度高一点,不要过灰,不然也会显得脏。
比如下面这些改好了的。
1、重色系 ✅
图片 
2、中性色 ✅
图片 
3、浅色系 ✅
图片 
再对比一下上面的几个辣眼睛色块,发现是不是差别还挺大。
 总结:根据颜色明度来控制颜色的饱和度  
说到这儿,其实学过美术的同学应该都知道,这个跟画色彩作品差不多,亮部尽量多给一些鲜艳的色彩,中间层尽量灰下去,暗部色彩可以稍微丰富一丢丢。
图片 

第三点:颜色要有主次之分,什么是主色,什么是次色,要分清楚。

在实际业务场景,非纯工具型应用,很难只用到一种色彩,因为不同的功能需要使用不同的色彩来进行区分。
因此大部分实际的界面设计需求当中,我们还是要用到两种到三种的色彩。
图片 
不过在搭配的时候,需要注意的是,颜色的主色跟次色一定要显而易见可以区分得清楚。
其中主色应该占据60%-70%及以上的面积,次色加在一起,不可超过主色的面积区域。
图片
这样做的原因,也是为了防止眼睛失焦,导致审美疲劳。色彩越多,主次越难分清楚,眼睛对于信息的视觉需要越耗精力,所以自然看着不舒服。
总结:让页面的色彩主次显而易见。 
 
这一点在室内的装潢上,也有讲究。
室内设计讲究的主次色搭配,黄金配色比例70% : 25% : 5%;
图片 
70%的基础色,包括墙面、地板和天花板。一般情况下,同一空间的这三者颜色尽量控制在2种,最多不能超过3种(毕竟现在很多人喜欢涂一面有色的墙)
图片 
比如你发现这些很好看的室内设计图,都差不多是这样。从室内设计的装潢里找取配色灵感,也是不错的一些选择。
图片
上面的这些,就是最重要的三个方法。把这三个方法掌握了,其实配色起来就容易多了,而且不容易犯错误。 
 
另外,好的习惯也很重要
另外方法很重要,但习惯也不可忽视,所以还是得养成一些比较好的配色习惯,这样才能最快的成长,巩固自己对于配色的认知以及理解。
比如多收藏美图,提升审美。这点虽然很不起眼,但对于培养自己的审美,是有着绝大的好处的。在收藏了100个不同色彩的图板之后,相信你就能感受到其中的差距了。

图片

 

 

另外在初期阶段,哪怕按照上面的方法去调整了。还是感觉自己配出来的颜色总是缺了点什么。那么不妨去吸一吸别人的颜色,在别人的颜色上借鉴。

图片

图片

 

 

颜色无非就那么几种,多吸一吸也不是啥坏事。
比如你现在要让我设计一个绿色界面的UI,我肯定会先去吸一下微信的绿色,跟360的绿色,然后结合这两个绿色,做一下微调,搭配出一个崭新的绿色。
图片 
毕竟是在巨人的肩膀上前行,自然也不会太差。 
 
还有,理解色彩的情绪
最后一个,就是配色前的思考与判断也很重要,色彩的情绪需要与实际的场景想吻合。不要做出跟场景预期不符合的颜色,高端场景用大紫大绿不合适。

图片

 

原文地址:UX小学(公众号)

作者:小学鸭

转载请注明:学UI网》配色 | 总监说颜色丑,我调了调确实好看多了!!

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

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

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

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



五个案例教会你“西文中用”字体设计

seo达人


图片 
 
作品均来自互联网,侵权删。
大家应该有所发现,有很多英文的影子存在,不管是添加局部的特征,还是直接用英文来拼成一个完整的字,这四组字体都有用到英文来做结合,同样的我们也可以采用这种手法来进行设计,这种处理方式的好处就在于不用我们再去冥思苦想反复横跳去寻找笔画的特征了,英文字库自带的特征就足以,且英文字库的数量和种类都非常庞大,各种姿势应有尽有,就看你怎么去开发。 
 
   
所以我们此次分享的方法就叫做“西文中用”。本文中的案例采用我前段时间的一篇站酷首页作品来作为思路分享与讲解,下面我们直接进入分享环节。 
图片 
 
那么刚刚提到我们主要需要解决的就是结构和笔画特征,结构我们可以采用垫底字的方法来快速解决,笔画特征自然是通过英文字母来处理了,第一个案例我们先来做一个简单一些的黑体类型的字,先放出最终稿看一下效果。 
图片 
 
图片
 
首先,我们可以选择一个思源黑体作为垫底字来解决结构部分的基础问题,其次,我们需要对英文字库大致的观察分析一下,来提取我们所需要的基础笔画,以便于我们后续的拼字过程,那么最常用的就是横、竖、撇、捺、点,以及横竖转折的处理了,其他的部分我们都可以基于这些笔画来进行延展出来。  
 
图片 
 
横的笔画不用想的太复杂,直接提取出它的粗细画条直线即可。 
图片
竖笔的部分可提取的处理就稍多了一些,这里我们先都列举出来,至于最终会用到哪个还要等具体拼字的时候才会确定。 
 
图片 
 
撇捺点的部分可选项不是很多,这里就放到一起来提取了,且这三个笔画的处理都可以更加灵活一些。 
图片 
 
转折处的处理同样需要进行尝试后最终敲定,(这里捺的处理我们把撇笔画直接镜像即可)。 
 
图片  
最后我们把笔画汇总一下,形成自己的一个笔画素材库,就可以开始拼字了。 
 
图片 
 
首先搭建基础的结构,但结构可能离我们想要的效果还有些差距,所以下一步还需要对结构进行一轮微调优化。 
图片 
 
微调结构,使整体的外部撑得更饱满,接近标题字形的处理方式,该对齐的对齐。 
 
图片 
 
进行一些不同笔画处理的尝试,这里就不一一去尝试了,大家在做的时候可以先选择一个字来进行尝试不同的处理方式,这样会节省很多试错的时间。 
图片
最后,选择更为合适的一组,调整一下细节,对齐笔画,统一粗细,统一处理方式等。
图片
图片
图片  
 
虽说有了自带特征的英文,我们可以不用过多去思考笔画的造型,但还是要多去尝试不同的造型和处理方式所带来的整体感觉,下面我们继续。  
 
图片 
 
第二个案例我们再做一款黑体类型的字,相较上一款会稍微复杂一丢丢,但方法都是相通的,我们往下来看一下这组字。 
图片
图片 
依然是寻找一个垫底字,以及分析英文的特点,这种方法一定要把英文自带的最大或者最好看的特征给呈现出来,不然我们选择西文中用就毫无意义了。
这里依然可以选择思源黑体作为垫底字的,根据英文的粗细程度,我们可以选择粗一些的。且可以适当调整垫底字的高矮胖瘦来达到自己想要的效果,这里我稍微压扁了一些。 
 
图片 
 
提取出基本的笔画特征,这里我就不再列举提取来源了,直接以文字的形式描述吧,大家可以一一去对照着看一下。
横笔的部分除了常规的横线,还可以提取出大写字母E的特征,上下是有一个角度上的呼应的。此外就是蜜蜂二字的虫字部分最下边的连笔处理,选择了数字7放倒的形式,算是做了一个特殊的处理。 
 
竖笔的部分除了常规的竖线还可以选择小写字母t的形式,也算是与横笔的特征做一个统一。
撇捺点的形式依然比较灵活,数字7的竖笔,数字1的左上角部分都可以作为撇捺的处理形式。小写字母i上方的点或是短竖线也都可作为点的处理。
转折处的处理会稍微灵活些,可以有一个比较多的尝试。
图片
下面,我们开始搭建基础的结构以及尝试笔画的初步形态。 
图片 
 
大体的感觉出来了,但个别部分的处理还是有些僵硬,如杜字的木字旁,捺的笔画处理,鹃字右侧鸟字右下的横折钩的笔画,都比较呆板,所以针对这两处进行优化。优化的大体思路可以考虑结合更多的英文特征进来。 
图片 
下面我们还需要对结构进行一轮优化,使整体更加饱满,整体的布白也可以进一步优化,说人话就是调整笔画的位置以及粗细,来达到正负空间更均匀的状态。
图片
最后可以进行一些不同的细节小尝试。
图片
尝试过后发现横竖转折处不适合做其他处理,所以还是回到初稿,鸟字上方的一瞥原本是竖线的处理改为圆点,与蜜字顶部的一点可以做一个区分,值得一提的是鹃字左上方的口字部分直接替换为数字2的处理解决掉了比较僵硬呆板的问题。 
图片 
图片 
图片 
 
图片  
 
第三个案例我们来做一宽宋体类型的字,相较前面的两款字会需要更多些思考与调整,照例先看最终稿。
图片 
图片 
先来看一下这次选择结合的英文字形以及垫底字的选择,垫底字肯定是要选一款宋体了,这里我选择的是一款日本的字体,英文选择了一款特征非常强的字形,尤其是连笔的处理效果非常好,所以这也是我们这款字结合的重点,要想方设法的搞里头,搞不里去就自己找原因。
图片 
继续拆解基础笔画,这部分不再多说了,相信大家对这一步已经轻车熟路了。 
图片 
 
乍一看好像英文的最大特征并不能结合多少,这时候就要去思考问题了,像英文中的一些细线的变化非常像连笔的形式,所以我们可以在中文当中去寻找一些可以做连笔的位置,来借鉴英文的特征结合进去。可以结合垫底字大致画一下草图进行尝试。
图片
不需要画的很细致,只需表达出笔画的大致的走向,重点是连笔位置的造型要清晰出来,虫字没画草图这里先不讲。 
 
 
这组字可以做的瘦高一些会更能凸显英文特征的气质,所以我们可以适当调整一下,下面开始搭建基础字形。
图片
绿字左下的连笔不太合适,有点糊掉了,虎字的连笔有些问题,最左侧的竖撇没能体现出来,所以要重新考虑连笔的位置,甲字的造型也不是很美观,虫字的下边在开始观察英文的时候就发现了小写字母g的下边可以替换,所以草图部分就不再做过多考虑了。 
 
图片 
 
下面针对出现的问题我们逐一解决掉,绿字左下的连笔去掉,正常做,虎字的连笔可以考虑一个另类的位置,从最外侧的竖撇最下端开始连,会很大程度上避免糊的问题,甲字上半部分的处理方式从字母P中提取到灵感,从而做出结合。
图片
图片 
 

小结Tips:

不难发现,这种方式其实并无太多难点,我们再来回顾一下重点。
1.英文的选择很重要,要具有鲜明的特征。
2.与中文做结合时要把英文最强的特征结合进来。
3.同一个笔画可能有不同的处理,要多去尝试,择优选择。
4.当中文中无法直接结合英文时,要考虑适当变形中文笔画,或是结合英文特征去进行处理笔画。
5.横着看竖着看,镜像看倒着看英文,会得到不一样的结果。
下面我们再快速的简短的再分享两个案例,因为方法都是类似的,磨叽多了你不烦,我还烦呢。  
 
 
图片 
 
第四个案例我们再来做个特别一点的字形,英文字形越复杂,我们结合起来的困难也就越大,当然困难点是各不相同的,照例看一下最终效果我们再来解析。
图片
图片 
通过上面的最终效果大家应该看得出来了,这一组字主要难在曲线的调整上,我们来具体看一下所选的英文字形以及垫底字的选择。
图片 
可以观察到这一组英文字的特征是极其强烈的,分析其主要特征,整体字形瘦高,非常多的位置都是类似S形的曲线,且带有粗细变化,这是主要难点,也是需要结合的一大特征。垫底字依然选择思源黑即可,YYDS。下面我们拆分笔画,调整垫底字。 
图片 
 
下面进入拼字环节,根据英文的特征,我们把中文的结构也设定为瘦高的,适当调整垫底字。
图片 
 
这一组几乎没有什么尝试的过程了,拆分出的笔画拼出的基础字形特征已经足够强烈,说几个需要注意的点,枯字右下的口字部分的处理,这里为了契合整体,选择把正常的口字设定直接放倒并拉伸至合适的比例,随即调整比例以及笔画的粗细程度,以达到与整体协调的粗细。这里把原字库的锚点情况给大家看一下,你们感受一下。 
 
图片 
 
可以看到右侧我是简化了非常多的,否则无法进行下去…
图片 
 
其余就没有过多的一个调整了,都是类似的方法去简化曲线,使其更好调整,横笔的特征可根据整体的空间来调整大小,如果全是一样大的,则非常难摆放。
图片
图片 
 
最后一组案例我就不再讲解了,因为都比较简单,直接给大家看一下具体使用的哪些字母。 
 
图片 
 
图片
图片
图片 
 
即使只是用了几个基础的笔画来回使用,最终的效果也是很有特点的。 
 
 
图片 
 
虽说看起来没什么难度,因为操作上没啥难点,主要还是在于多去发现,多去观察字母与汉字笔画的关系,甚至这个思路可以延伸至任何地方任何事物,都可以成为你处理笔画的一个思路来源。 
 
图片 
 
知道你们对素材感兴趣,后台回复666可获取字库安装包,不止文中提到的这些,我又收集了一些适合西文中用的英文,都给你,你要的我都给你。
好了,这次的分享就到这里了,如果大家感兴趣,可以去我的站酷看更多案例,站酷id:猴子设计,老铁们我们下次再见,告辞! 
 
 
原文地址:胡晓波工作室(公众号)
 
作者: 猴子
 
 转载请注明:学UI网》五个案例教会你“西文中用”字体设计

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

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

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

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


这几年,一直备受关注的8pt网格设计系统,究竟是怎样的?

seo达人


图片
Photon Design System
比较知名的 Audi Design system
图片
Audi Design system
当然还有一些公司,如airbnb,他们设计体系也是基于8网格为基础来定义的。
图片
Airbnb Design Language
看到这,大家是不是很想了解8pt网格到底如何构建一套强大设计系统?底层逻辑是什么?为何诸多大厂都选择这个数字?下面我们一起来揭晓。
为什么是8pt网格系统?
图片
首先这里给大家介绍下pt 这个单位,pt是“点”的意思,一倍图情况下1pt=1dp=1px,所以8pt(8点)网格系统,我们一般默认情况都是基于1倍图来进行设计的。
图片
大多数屏幕宽高数值几乎都能被8整除
如果用数字8作为设计中最小原子单位,可以很方便的缩小画布的设计尺寸,8/2=4、4/2=2、2/2=1。如果从10、5、6这样的数值开始,你缩小到的网格单位可能存在小数点的像素,一般不推荐这样的数值进行设计。
下面大家看一个图
图片
来源网络
第一排使用基于8pt的网格系统,下面一排是基于 5 为单位的网格系统,当他们分别适配到对应的倍数时候(0.75、1、1.5倍),下面一排就会出现次像素。如果使用基于8pt的网格系统,几乎很少遇到次像素的场景。
如今,屏幕碎片化时代,多终端设计需求层出不穷,为了能确保多终端适配更灵活,基于8pt网格的设计系统已成为诸多设计师的共识。
如何应用8pt网格?
图片
如何将8pt网格贯穿整个设计系统里面?这里首先需要创建一个基于8pt的网格系统。有了这些数值,那么下面就可以根据定义出来的数值去创建分子组件甚至设计最终的页面。
图片
Google Materials Design 基于8pt网格布局设计,下面我们就基于8pt网格系统的规则,给大家演示如何构建基础层设计框架,这部分也是最重要的。

 

#1.排版

图片
来源网络
如何将8pt网格应用在排版中?很简单,只需要将字体行高统一定义基于8pt网格的增量,就是8的倍数,这样文字排版就能对齐到基于8网格的画布中。

 

#2.图标

图片
图标的大小尺寸定义,也是需要基于8网格来定义。就像右侧基于8网格的图标尺寸,在排版布局时候刚好能够对应到网格上的。

 

#3.阴影

图片
如果需要定义阴影数值,那么阴影也是需要基于8网格系统来定义。

#4.圆角

图片

设计系统里面所有涉及到组件圆角值,都要基于8网格来定义。大圆角一般会用在页面级别的组件设计,比如沉浸式浮层或者弹窗等

 

#5.栅格布局

图片

包括整个系统页面级别的布局,都需要基于8pt网格来建立规则。上图是web端和移动端基于8pt的布局系统,需要确保水槽和边距是遵循这个规则的。

图片
最后,在项目开始的前期,一定要基于8网格系统设计,来将原子级和分子级的组件基础打牢。因为后期开始大量页面设计时,涉及到多人协作,甚至多团队。

以上就是一个8pt网格设计系统的大致思路框架,当然除了上面这些,一个设计系统里面需要涉及到8pt网格系统还有响应式布局等,大家先一步步深入了解学习,将这套理念应用在项目中,发挥最大价值。

最后今天既然讲到了设计系统,我正巧也找到了iOS15的figma格式的UIKT,是在线版本的,可直接打开。大家可提前研究下iOS 15的一些新的规则与变化。

图片

图片
领取方式如下:公众号后台发送 iOS15 即可获取当前地址

 

原文地址: 功夫UX (公众号)
作者: 功夫UX
转载请注明:学UI网》这几年,一直备受关注的8pt网格设计系统,究竟是怎样的?

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

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

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

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


完蛋了,这个需求的颜色没选好,结果不能休息了!

seo达人


01 颜色容易用脏

这是一位同学临摹的练习:

图片

整体一看还是比较ok的,不过仔细来看有一个问题,就是冰淇凌的脸有点脏了,我们对比下原作:

图片

脸部我一般会用偏白一点的颜色,如果要白不白,要紫不紫,卡在中间就有点像中毒了一样。
其实很多人都容易把颜色弄脏,尤其是橙色、黄色,比如下面这个练习,颜色也稍微有点脏了:

图片

我们拿出一个颜色来看下,这个渐变颜色的暗部有点靠右下了:

图片

如果我们把暗部颜色往左上调整一下,就会好一点:

图片

当然,我最常用的方式,还是去改变暗部颜色色相,把黄色色相往红色靠,这样颜色不需要加太多黑色,就会更纯更干净:

图片

我们看下三个颜色的对比:

图片

最后一个会通透很多。

 

02 颜色色相选取问题

最近在做标签的时候,设计师选取的颜色不是特别好看,反复优化之后,发现还是走不出原本的感觉:

图片

其实我们很多人都会有这样问题,在选择颜色时候从自己脑内存中调取,但是调取的大部分颜色都是比较正的色彩,正红、正蓝、正紫,最后的效果就会不太理想。
其实我们平时也会接触很多色卡,但很多人一到选色的时候,还是习惯自己想着做,其实随便在网上找一些好看的颜色:

图片

咔咔一吸,然后再根据自己的风格一微调,我觉得效果肯定能比普通的颜色好一些,我们看下对比:

图片

所以,如果自己选不好色相,一定要多找参考,网上的色卡真的太多了,参考起来!

 

03 颜色对比度问题

还是最开始那组临摹练习:

图片

我们看下这两个图标,有没有什么问题:
会不会觉得第一个有点糊?其实就是因为第一个图标两个面对比不够,而第二个铃铛,面与面的颜色对比很强,就会比较清晰。
我当时在做的时候,这个图标也调了很久,我们看下对比效果,原作的明暗对比会相对明显一些:

图片

明暗对比是非常重要的,还有在一些材质上的作用也很明显,比如金属,我们看下我这个火箭优化前后的效果:

图片

之前就是明暗对比不够,导致很糊很平,拉强对比后,立马清晰立体很多!
所以,颜色对比度,相当重要了。

 

总结

以上就是最近对颜色的一点小感悟,希望对大家有一点启发和帮助,我们下期见啦!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》完蛋了,这个需求的颜色没选好,结果不能休息了!

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

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

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

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


B端设计指南 – 栅格的定义

seo达人



为何会有栅格?

早在平面设计开始之初,就有对“栅格”的使用记录。(不过那时不叫栅格,而叫网格)因为印刷机器以及切割工具的限制,导致在页面的板式设计需要一定的出血线用于防止书籍内容的缺失,因此出现了当时非常火爆的《平面设计中的网格系统》一书。

图片

虽然这是一本非常老的书,但是设计本身就是相通,将其核心思想用在图标设计、网页设计、B端设计当中都有着明确的指导意义。

而在设计(网页端、桌面端)产品时,对于空间上的理解,一直以来都是令人头疼的问题。

我们将屏幕当中的设计空间分为 横向 与 纵向 两个维度:

图片

横向:

由于大多数显示器都是宽屏的形式,导致我们大多数页面内容都是通过横向的方式进行列式排布,也就导致纵向导航、二三级内容分布较多;而市面上所要兼容的横向尺寸较多,大致分为:1920、1440、1366、1280,而怎样将如此多的尺寸,摆放不同的元素,这仿佛才是设计的难点。

纵向:

屏幕的纵向的空间同样十分关键,当内容在横向无法满足时,则会增加屏幕纵向的内容量。但是我们可以通过浏览器的特性,纵向的内容通过滚动条进行收折,进而实现兼容。

 

栅格的定义

前面说了这么多,我们来聊聊栅格的定义。

栅格:是对界面当中元素横向排布的一种模式,主要用于大型区块间距的排列,不适用于 图标与文字 间隔的小型元素。

图片

这里有两个重要点:

横向排布:代表着栅格的用法,这也是为什么栅格都是一列一列的原因。

用于大型区块:不是任何内容都可以用栅格,比如在 卡片当中的图标、文字,更多是要分析整个卡片,将其看作一个整体,如上图。

 

栅格的组成形式

在一个常见的栅格当中,一般分为 页边距、水槽、栅格宽度:

图片

页边距:是栅格与外层信息的保护区域

因为在整个栅格系统当中,除了栅格之外,往往还会有其他的内容进行展示(如上上方图,栅格日常的使用页面),而我们正好可以通过页边距的方式,将其进行区分。我们以常见的B端界面为例,通过页边距可以将侧边导航与内容页进行区分,保证页面间的亲密性,常见的页边距尺寸一般为 20px、24px。

 

水槽:是确定栅格宽度间的固定间距,通常是帮助栅格内的元素进行更为合理的排布。

水槽目的就是为了统一元素间的距离。比如现在页面当中有两个卡片的内容,而使用水槽,我就可以将这两个卡片的内容,确定其间距(再次强调栅格用于确定横向内容)方便栅格当中元素的信息排列。

 

栅格宽度:是栅格当中内容所占的基本宽度,一个栅格宽度往往是通过 内容宽度、页边距、水槽 排除过后所剩的宽度平均得出,一般会分为 12栏、24栏 两种方式。

栅格宽度的确定,其实就是一个数学题,先给你一个公式(不建议使):

(A×n) – i = W

A:一个栅格单元的宽度;a:一个栅格的宽度;n:正整数;i:水槽宽度;W:页面的宽度。

虽然公式好像是万能的,但我不喜欢死记硬背,来深入讲一讲这个公式背后的逻辑和使用方法。

 

以1440的页面为例,通常B端产品左侧会有一个导航菜单,假设为 200px,因此整个栅格的内容页则为1440 – 200=1240px。

图片

然后设定页边距宽度为 24px,一个栅格会有两条页边距,剩下宽度则为:1240 – (24*2)=1192px

图片

接着设定整个栅格为12栏,水槽宽度为8px。因为水槽位于 栅格 的左右两侧,也就意味着水槽的数量会比栅格少一列(别问为什么,问就自己去下面图片数一数)也就是1192 – (8*11)=1104px

最后因为在水槽已经确定栅格为12栏,整个栅格的宽度则为:1104/12=92px

图片

如果还不能理解,建议跳到开头,再看一遍。

 

这里有两个关键点

整个栅格的顺序不能乱:页面宽度→页边距→水槽→栅格宽度。因为我们的栅格一定是从大到小,从外到里,不然做出来的内容很容易无效。

将元素摆放在栅格中,还需要注意起始位置与结束位置。这里教你们一个口诀:起始在左,结束在右;换句话说就是元素的起始位置必须放在栅格宽度的左侧(也中的红线);

图片

结束位置必须放在栅格宽度的右侧(图中的蓝线)

图片

这样的方式也是为了避免很多设计师知道画栅格而不会用栅格,出现一些低级错误。

图片

关于栅格的定义就先聊到这,下期来与大家讲一讲关于栅格应用当中的自适应布局、响应式布局,以及其中的断点等内容,我们下期见~

 

原文链接:CE青年(公众号)

作者:CE青年

转载请注明:学UI网》B端设计指南 – 栅格的定义

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

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

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

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



如何构建设计语言系统?

涛涛

什么是设计语言?

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

设计语言有哪些?

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

百度直播业务,从单一业务形成系列平台服务,囊括的不只是 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

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

存档