首页

形状跟设计有关系吗? 有关系

seo达人


四个等距离圆点用线相交形成的正方体为四边形。
图片 
 

以点为中心,以直径为距离旋转一周所形成的封闭曲线叫做圆,也是中心对称图形。

图片

这些形状本身并没有什么含义,但跟设计有关系吗?

有关系。 

 

 

图片

 

 

同一张图片正方形的视觉看起来稳固,但视线却不容易有着重点,显得呆板沉闷。

图片

 

 

16:9的长方形能让观看者有沉浸的体验感,视线也显得宽广,符合人眼的生理需要。(人的眼球视野基本是椭圆形,两个椭圆形相加从中裁出的矩形就是16:9的长方形,更符合观赏)

图片

 

 

这也就为什么在生活中数码设备、影院荧幕、书本、海报的大部分尺寸都以长方体为主的原因。

图片

 

 

而圆形虽没有长方形的视线宽广, 但却有着独具一格的聚焦特点,能让视线完全集中在图形内部,体现出一种东方特质的艺术美感。

图片

圆的使用场景不仅与生活息息相关,例如汤圆、剪纸、圆桌、太极、建筑等有关。

 

「在东方」

「在中国」

更代表着团圆与美好寓意

图片

 

二十四节气「以圆为形,以气为本」

中国传承千年的优秀文化

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

原文地址:修先森撩设计(公众号)

作者:修先森

转载请注明:学UI网》形状跟设计有关系吗? 有关系

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

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

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

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

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




UI 场景下的春节氛围设计

seo达人


目录

一、应用图标设计

二、金刚区图标设计

三、底部标签栏设计

四、导航栏设计区域

五、顶部视觉区域

六、背景氛围强化

七、模块分类强化

八、闪屏氛围营造

九、功能区域置换

十、运营设计营造

 

一、应用图标设计

应用图标是用户接触产品的第一个环节,也是视觉差异化体现的重要部分。在春节主题氛围中也是表现丰富多样,从不同的方向体现出春节的浓厚氛围。

主要的处理形式会围绕春节主题文案、生肖卡通形象、主题皮肤、春节元素和颜色等。以春节主题文案举例,通常是春节祝福语和营销结合的文案为主,设计在应用图标底部居多,将图形适当向上位移进行视觉平衡。也有一些产品结合自身图标因素,将文案设计在顶部位置,也是为了保持整体结构的稳定性。

图片

除了文案表达以外,配合生肖卡通形象也是较为常见的手法,可以是局部元素的装饰,也有是作为皮肤使用的。比如今年是虎年,利用老虎的形象或者局部元素表达也是层出不穷。

图片

无论是文字表达还是图形结合,应用图标上的表现都是在主题活动中优先考虑的场景,这是被用户在众多产品中发现的第一眼。

 

 

二、金刚区图标设计

金刚区就像百变金刚一样,将各种功能和业务聚集在一个区域,便于用户进行快捷操作。在金刚区图标上面进行设计发挥是最为普及的,春节期间众多产品都在各种形式上面进行发挥,呈现出很多优秀的设计案例。

最为简单的做法就是将带有春节主题的文案融入到图标设计中,这个形式适用于各类节假日和活动主题中。表现手法也是非常简单的,配合元素点缀和色彩渲染,很容易体现出主题氛围。

图片

 

 

保持图标造型不变,在外形轮廓背景中融入春节元素也是一个可行的方向。比如将灯笼作为图标背景,配合元素装饰和色彩搭配,呈现出的春节氛围也是非常浓厚的。

图片

也有结合春节元素对金刚区图标进行设计重构,带来的感官体验也是非常不错的。运用到的元素涉及鞭炮、福字、元宝、红包、糖葫芦等等,结合中国红营造出浓厚的春节氛围。

图片

 

 

将春节元素点缀到图标中也是一种不错的选择,或者配合春节主题颜色进行搭配,也能够营造出浓厚的新春氛围。

图片

金刚区图标设计是营造氛围的最佳区域,不会对业务布局和产品结构造成影响,能够根据氛围的要求作出灵活的调整。

 

 

三、底部标签栏设计

底部标签栏是用户进行功能模块切换最频繁的区域,通常营造氛围和金刚区一样,都是非常直观和效果显著的区域。

将春节元素融入到底部标签栏图标设计中,带来的感官体验是非常不错的。可以是单个的春节元素,也可以是元素的局部装饰,都可以非常直观的传达给用户,突出春节活动氛围。

图片

 

也有将春节主题文字融入到图标设计中,一种是直接结合字体设计和春节元素表达;一种是结合外轮廓背景,字体作为图标部分镶嵌入背景中。文字的识别性有助于用户更快理解,传达氛围也是非常直观高效的。

图片

 

如果不想改变太多,也有一些产品只是在中间凸起模块图标上面进行氛围设计,也能传递春节的氛围。这样的设计解决方案最大限度的保留了原本的设计内容,属于弱氛围营造,也能达到一定的氛围营造目的。

图片

 

除了在图标设计上面营造以外,也能在底部标签栏背景上面营造,配合中国红营造出来的氛围也是非常浓厚的。也可以是配合颜色和元素进行营造,比如烟花效果也是不错的选择。

图片

底部标签栏设计区域的氛围营造效果非常显著,无论是背景层面的营造还是图标设计上的创新,都能带给用户非常直观的体验。

 

 

四、导航栏设计区域

导航栏+状态栏通常是品牌色或者白色居多,也有少数产品会使用其他颜色进行设计。在春节期间这个区域也是作为氛围营造的不错选择,除了利用中国红作为颜色层面的选择以外,也有结合春节元素进行设计表达的。

图片

 

除了静态的设计表达以外,也有结合动效的表达提高吸引力,突出春节浓厚的氛围。(比如:途牛旅游)

图片

 

 

五、顶部视觉区域

顶部视觉区域和导航栏区域比较类似,不过顶部的范围更大一些,运用的场景更多一些。除了首页以外,在其他主界面也可以使用这个区域,带来春节氛围的营造。

首页 Banner 区域是顶部视觉区域面积较大的板块,结合 Banner 进行背景营造,带来的视觉效果也是非常突出的。

图片

 

 

除了根据 Banner 效果营造以外,也有只是营造背景层面的形式,将背景颜色营造出春节的氛围,效果也是一目了然。

图片

在其他的主界面中顶部视觉区域也可以进行营造,比如个人中心的视觉营造,带给用户的感官体验也是非常的直观。

 

 

六、背景氛围强化

除了在局部的区域进行背景的氛围强化以外,也有将大面积背景进行春节强化的。通常是通过颜色来强化,比如通过中国红来烘托春节氛围,也会在背景中装饰一些春节元素,进而增强氛围感。

图片

背景强化适合卡片式布局,更能衬托出空间感,强化视觉效果。

 

 

七、模块分类强化

在大视觉模块区域强化表现是较为突出的,为了体现精细化的表达,在细节的设计中也会加以注重。

细分模块的设计嵌入可以弱化视觉比重,也能达到融入春节主题的目的。比如在模块分类的设计中,将春节主题字体替换到类别中,作为活动栏目的表达,也是非常不错的设计表达。

图片

 

 

八、闪屏氛围营造

闪屏和启动页本身属于相同的表达,都是为了缓解用户启动应用时,等待过程中所产生的焦虑感。不过随着闪屏广告的概念,被区分呈现出来了。

体验了很多产品,发现还是闪屏广告居多,以营销活动为主的案例较多。单纯突出春节主题表达的很少,以春节主题配合营销活动设计比较多些。

图片

不过启动页的位置作为主题氛围营造是值得考虑的方向,作为品牌情感化的延伸是非常不错的选择。

 

 

九、功能区域置换

功能区域在这个环节我是作为整合而存在,指的是下拉刷新、空状态、加载、主按钮等等。在一些重点区域强化春节氛围是很多设计师的首选,也有一些会在细微之处深入挖掘。

下拉刷新对于一些内容更新频繁的产品来说,是用户操作非常频繁的功能。通常情况下,是结合文案提示、默认动效、品牌元素、吉祥物动效等进行表达,而春节期间很多产品也嵌入了春节活动,将功能区域进行置换。不仅可以达到刷新的目的,也能带给用户春节的氛围感。

图片

 

在一些主按钮比较突出的产品中,也会在按钮的设计上面融入春节的元素,在细微之处带给用户氛围感。

图片

以上案例仅为列举,功能区域置换是一个可以探索的方向,不仅可以达到突出主题的目的,也不会影响功能的操作。

 

 

十、运营设计营造

运营设计通常都是最活跃的,不会放过任何一个主题的参与,春节这样的大节日更是重点参与的对象。

在春节期间通过各类活动的设计突出春节氛围,让用户在感受氛围的同时促进消费。除了在视觉效果上呈现出丰富多样的表达,在互动玩法上面也是费尽了心思,带给用户更多趣味和年味。

图片

 

运营设计的营造主要是在专题活动的表达上呈现,也会配合 Banner 设计或者其他插入式广告,还有弹窗广告的结合也是较为普遍。

图片

 

小结

春节随着时间的推移已经过去,本文梳理了在春节期间观察到的移动端 UI 层面的变化,总结案例是为了探索大家的设计解决方案,积累更多不一样的设计思路。案例主要以感官层面的为主,希望这些视觉表达层面的思路,可以带给你更多灵感。

本文主要是个人观察所感,不足之处望大家自行补充,我们互相进步。

 

原文地址:黑马青年(公众号)
 
作者:黑马青年
 
转载请注明:学UI网》UI 场景下的春节氛围设计

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

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

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

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

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


爱美有度——柠檬爱美品牌LOGO升级

seo达人


项目背景

柠檬爱美依托百度庞大的流量与移动生态服务优势,在“精准搜索+精准推荐”双引擎下,用百度大脑结合大数据建立精准用户画像,通过下探业务目标、挖掘用户诉求,结合百度APP生态,搭建搜索场景下的医美科普内容服务平台。

 

1. 业务战略升级

近年来,医疗美容行业增速迅猛,行业乱象频发,亟需提升整个行业服务质量和品质。本次业务战略升级围绕内容建权威专家科普解读,打造用户放心、安心的医美服务保障品牌。目前设计价值重申迫在眉睫,品牌logo也应配合战略方向优化升级,助力品牌心智打造。

图片

 

· 设计趋势变化

随着时代的变化,人们需求的变革,极简化、扁平化已成为近几年的品牌logo设计趋势。品牌升级的背后除了商业模式的变革,也是顺应新的设计流行趋势变化。

图片

2. 问卷调研

· 设计问卷

项目初期,我们采取一对一的访谈方式去了解产品背景和诉求,寻找设计抓手。通过精心设计的、有场景带入的问题,让参与者在放松的状态下把他对产品定位等关键信息准确表达出来,这里需要注意的是邀约参与者必须包含各业务方向的产品决策人。过程中也对医美行业、大环境的洞察分析以及目标受众、竞争对手、产研方向等做了探讨。

图片

 

· 定量分析问卷结果

通过分析问卷结果,我们与业务方达成了本次品牌升级的目标,希望通过品牌logo升级,传递出权威科普、服务保障、科技医美的品牌定位。

 

3. 概念探索

通过前期调研我们已经有了明确的业务定位,但是我们所提供的服务要给用户建立什么样的心智印象?什么样的品牌传播能产生用户共鸣?我们如何处理电商与内容的品牌关系?都仍是未知,这也恰好是品牌需要解决的问题。

带着这些疑问,我们收集并查阅了大量用研、品牌资料,我们通过金字塔模型从产品的功能属性、实际价值、情感价值、产品个性、品牌精髓5个纬度逐一进行关键词的发散与收拢,帮助我们进一步清晰柠檬爱美品牌“模样”。

图片

为了尽可能提炼出既符合产品理念又有用户共鸣,且引发互动的品牌理念。我们将金字塔中的关键词分别对应图形参考案例,面向业务方发起了第二轮调研,在调研讨论的过程中,我们不断完善聚焦概念,“爱美有度”这个概念方案也一步步浮出水面。

 

4. 方案设计

· 概念锁定

经过长达1个月的不断尝试,逐步明确概念如何转化成可执行方案。最终我们锁定在“爱美有度”,“度”这个兼具名词与动词属性,具有更大的想象空间和丰富的情感属性。不仅暗指百度医美垂类品牌,更传递的是平台价值观:内容有信度、服务有温度、科技有态度的涵义,天然带有积极的导向意义。

图片

 

· 草图绘制

在草图绘制过程中,最大的挑战在于“柠檬”与“度”的图形诠释。首先我们需要一个不落入俗套的柠檬外形。其次“爱美有度”品牌概念如何通过图形元素能让用户感知,又能精准的传递“权威保障”信息。

手绘的方式简单快捷,可以很高效的对齐大部分的设计共识。期间大家发散了很多想法,尝试了很多方案。经过两轮手绘下来,主体定格在“手托举”的柠檬外形,虚形恰好是柠檬,建立品牌专属记忆点。造型饱满圆润,充满能量且呈向上趋势,象征求美者的美好希冀,也体现了“爱美有度”的设计理念。让受众能感受到品牌传递的权威、专业、信赖。

图片

图片

 

· 提案设计

总结各阶段结论,最终形成设计提案主线。采用视觉冲击力强的图片辅以文案,精准传递logo方案表达的设计概念,最终方案定稿。

图片

图片

图片

图片

图片

图片

图片

图片

 

写在最后

品牌升级不仅仅是换个logo那么简单,而是产品定位和策略发展落地中的重要一环。本次柠檬品牌logo设计,我们无时无刻都在思考如何更好地了解用户,贴近产品,传达理念。希望通过本次升级,用户能感受到柠檬爱美品牌为了更好的服务用户敢于突破,力求革新的决心和信心。

 
 
原文地址:百度MEUX(公众号)
  
作者:陪你一起变美的
 
 

转载请注明:学UI网》爱美有度——柠檬爱美品牌LOGO升级

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

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

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

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

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



看那么多高大上的海报有什么用?

seo达人



01.

丹麦一家叫做Hugmun的设计工作室,为一家名为Cinemateket Trondheim的电影院,设计了一年的月度计划系列海报。设计师用简洁、抽象的插画来表现与电影相关的内容,每一张海报都有着丰富、艳丽的色彩,标题字体根据不同插画的气质而做出变化。另外,大部分海报都有眼睛元素,旨在传递沉浸式观影和穿越时空的体验。 

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

 

02.

这是一个叫做Ostbahnhof派对的宣传海报,该派对融合了音乐、艺术、政治等多种元素。设计的主题为:什么都行。意思是这里无奇不有,在这里干什么都行,传递出这是一个极度丰富、自由、包容的派对。所以,在设计上也比较天马行空,拼贴风配图、对比强烈的荧光色、密集的构图和排版个性、个性十足的字体,无不传递出令人兴奋、向往的视觉感受。 
 

图片

图片

图片

图片

图片

图片

图片

 

 

03.

这组海报出自法国设计工作室:My Name Is Wendy,为一个叫做流星计划的项目所设计,该系列海报都是以火车以及Meteor(流星)为设计主体。精细的插画与简洁、硕大的无衬线英文字母相结合,呈现出强烈的繁简对比。为了突出主体,没有搭配插画的字母笔画都相对细很多,内文的字号则尽量缩小,与Meteor穿插排版,整体看起来大气而又细腻。以黑白灰作为主色,使海报的复古和工业气息更加浓厚。 

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

图片

 

04.

这组海报不知道算不算“新丑风”,反正我觉得还挺好看的,虽然色彩的饱和度很高、对比很强,但是并不刺眼,反而给人活泼、时尚的感觉,因为每张海报都有明确的主色。插图虽然很搞怪,但是并不丑,反而挺有趣,加上简单的动效,让人感觉很魔性。大部分海报的主体都是由多个分散的元素组合而成,插图与几何图形以及文字看似随意实则有序的组合在一起,使整个版面看起来既灵活又很整体。 
 

图片

图片

 

图片

图片

 

图片

图片

 

图片

 

05.

这是一系列Nike鞋子的产品海报,很明显这是一组基于网格系统排版的作品,所以整体看起来很严谨,而且平衡性非常好,但又不乏灵活,因为设计师把版面进行了不规则的切割,点线面相互穿插,彼此又保持着对齐的关系。色彩以黑色和浅灰色为主,但每个版面都保留了小面积的一两个彩色,使画面变得更有生气。

 

图片

图片

图片

图片

图片

 

06.

这组海报的主题为西班牙时尚,展示了春夏秋冬各种时尚的西班牙服饰,海报中的字体和排版以直线为主,但图片的轮廓几乎都是圆润的,这种强烈的对比增加了海报的现代感和时尚感,而且因此产生的留白也让版面有更多呼吸空间。 

图片

图片

图片

 

图片

图片

 

主题的设计也是一个亮点,以无衬线字体为基础,组合搭配了几种其他风格的字体,甚至还把个别字母置换成了几何图形,使简单的画面多了一些设计感和细节。另外,这组作品也给我们提供了几组高级而时尚的配色方案:黑色配青色、黑色配橙色、黑色配紫色、黑色配香槟金。 
 

07.

这是一名新加坡设计师设计的一系列海报,由于他业余时间很喜欢看足球,所以一有空就会去设计一些知名球员的海报,截至目前已经累积设计了好几十张,这些海报都是以球员,以及与其相对应的俱乐部队徽、队名、城市为设计主体,每张海报的设计形式都不一样,但都有很强的形式感和视觉冲击力。

图片

图片

图片

 

图片

图片

 

图片

图片

 

 

图片 

多看永远是学设计的第一要义,并且,我们有时还得跳出自己的专业、自己的工作领域去看,这样才能吸取到更多、更新的东西,即使有些东西说我们看不懂的、用不上了,但仍会有收获。

 

原文地址:葱爷(公众号)

作者: 葱爷

转载请注明:学UI网》看那么多高大上的海报有什么用?

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

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

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

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

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



你需要知道的弹窗设计原则!

高劲

本篇文章将围绕着弹窗类型、使用场景、转化率及常见问题为侧重点,将自己对弹窗的理解、设计经验分享给大家,帮助大家对弹窗组件有更清晰的认识,为后续避坑设计出更好的弹窗做准备。

浅谈设计中的温度——如何用互联网思维帮扶乡村孤寡老人和留守儿童

鹤鹤

前言

 _


提及“设计的温度”,不得不提我们老生常谈的“情感化设计”,提出这一概念的美国认知心理学家唐纳德·诺曼将设计拆解为三个层次:本能层、行为层、反思层,层层递进。



1/ 本能层的设计,是视觉的直接反馈,是指用户第一眼看到的、感觉到的东西是否会激发用户兴趣;

2/ 行为层的设计,注重的是效用,产品功能是否好用,易用,用户使用产品过程中能否高效解决问题;

3/ 反思层的设计,是情感化设计的最高层次,指用户使用产品后,是否建立情感连接和记忆反馈。

因而,它们是从美学诉求到效率诉求再到情感诉求的一个进阶关系。


如果一款产品在满足基本功能,对于用户有用,同时好看并且易用,使用完之后还能产生愉悦以及满足感的话,那么这将是一款好的情感化设计产品,那必然是一个有“温度”的设计。


如果一个项目本身充满社会使命和责任感,那么“有温度的设计”将可以助推项目的落地链条,让使用平台的用户有“温度”,更让项目背后的人员感受到“温度”。


因为,接下来陈述的项目是一个很有“温度”的项目——用互联网工具去温热社会中的穷苦灰暗,用互联网思维去帮扶社会的乡村孤寡老人和留守儿童,用有温度的设计去践行有温度的项目。




项目背景

 _


随着我国社会经济的快速发展,农村青壮年劳动力转入城市,人口老龄化趋势加剧和家庭结构的演变,“空心村”越来越多,因此在乡村出现大量的“留守儿童”和“孤寡老人”。据统计,在农村独居和空巢老人超过3000万人,留守儿童也达到了近2000万人



孤寡老人因为独居生活、物质困难、缺乏照料面临着易患疾病、精神压抑等很多问题;而留守儿童因为缺少父母监管和陪伴,极易产生很多身体及心理问题,这两大群体是我国人群结构的重大组成部分,一个是未来的花朵和希望,一个是曾经发过光热的迟暮老人,他们需要关爱和守护,需要有一座“有温度”的桥梁,为留守儿童撑起蓝天、健康成长;为孤寡老人送达温暖、安享晚年。



基于社会现状,践行社会责任,腾讯为村平台联合中国社会福利基金会、腾讯公益慈善基金会,预想搭建一个线上与线下结合的平台,成立“为村暖心小站”,立足于脱贫地区的农村社区,主要服务农村的一老一小以及其他需要帮助的困难群体,解决日间照料、健康护理及心理关怀等诸多问题。




设计思路

 _


1,定义产品形态


“暖心小站”的整个帮扶路径是以线上+线下相结合的模式,依据产品需求,在线上可以招募志愿者、发布救助需求、触达爱心人群;在线下建设实体服务站,开展具体的帮扶活动。从而形成一个从线上到线下的一个完整帮扶闭环。



那在线上的呈现形态上,主要考虑APP和小程序两种方式,经过对比分析,APP稳定性高、体验好,但是在乡村的受众群体内,互联网基础还是很薄弱的,要让村民朋友下载和适应一个新APP是一个难度非常大的事。而微信在乡村的覆盖面非常广,占有率很高,那么依托于微信的生态、建立小程序,在推广层面会更加便捷和高效。同时,暖心小站本身结构简单,是一个非常轻量化的应用,这种特性也更适合以小程序为载体。



2,确定产品结构


在线上的产品框架上,设立两大专区:关爱老人专区和呵护小孩专区,各自创建知识宣导、在线课堂、爱心募捐等版块内容,同时在线上召集志愿者,在线下成立社区服务站,开展帮扶活动,然后志愿者们在线下实地服务打卡同步展示在线上的暖心小站。


确定框架之后,梳理角色和场景。本项目主要包含线下服务站的站长,工作人员,志愿者以及社会的爱心人士。



站长、工作人员、志愿者主要是通过线上为村暖心小站这个平台发布活动信息、记录服务概况、展示志愿者风采,社会的爱心人士通过线上平台查看对应信息并参与对应活动,最终帮助农村的一老一小解决各种帮扶问题。


经过梳理分析,平台使用人群的年龄跨度较大,30岁到60岁这个群体占到了80%左右,所以在产品的呈现形式上将兼顾青年到老年的年龄跨度,让设计更友好,让产品有温度。



3,制定设计策略


定目标


基于前面分析,在农村现实环境中的孤寡老人和留守儿童,他们生活是灰暗的,情感是封闭的,他们需要有更多志愿者以及爱心人士给他们带去阳光和温暖,让孤寡老人可以健康生活,让留守儿童可以健康成长。 




所以在设计目标的确定上:让产品形成一个“有温度、有故事、可以连接情感的桥梁”。让贫苦生活渗透阳光、感受温暖、看到希望。



定色


品牌色的推导,是站在线下的实际场景感受来提炼,乡村的孤寡老人和留守儿童的生活是贫苦的、灰暗的,他们需要金灿灿的阳光给生活带来希望,而我们日常所的见的公益组织通常都是以红色系为主,似乎已经形成了作为公益组织的标识色,因为这种大红色传递爱心、带来温暖。


这些颜色都很有代表性,黄色代表阳光,红色代表公益,而暖心小站,将这两种颜色进行叠加融合,形成阳光橙,再以阳光黄纳入辅助色,形成温暖、友爱、活力、阳光的色彩体系。





定原则


在设计原则上,考虑到我们的用户群体年龄跨度比较大,一些年长用户互联网基础薄弱,为了让产品更有亲和力,让年长用户都能轻松上手,所以在策略上制定简单、易用、温暖的设计原则,保持框架简单清晰、交互简单易用,让产品有温度,让用户觉得有用、好用、还想用。



在“简单”方面,保持产品的页面框架要简单,结构要清晰,让用户清楚知道自己在哪里,所以在产品形态上只做了内容页的垂直展示,没有过多琐碎的信息入口,让页面信息更集中,浏览体验更聚焦,让年长用户也可以简单使用。



在“易用”方面,简单的框架和结构是易用的基础,在视觉元素的排列上,通过加大的图片、加大的间距、加大的圆角,通透的页面布局可以让内容陈列更集中,获取信息更高效。页面的间距以4px为基数,分为5个跨度,在统一性的基础上让界面更有节奏感,层级更清晰,从而提高产品的易用性。



在“温暖”方面,主要体现在在调性、元素、和内容上:

调性:以“温暖橙”+“阳光黄”为品牌色系贯穿始终,形成温暖、阳光的整体基调;

元素:在常规尺度上进行适当加大,加大的字体,加大的卡片占符,加大的点击区域,让产品更照顾年长用户的操作习惯,让产品更有温度;

内容:在内容及主图的运营展示上,突出“温暖”的调性,增强用户的共鸣,拉近用户与产品之间的距离。





整体视觉呈现

 _


整体以大面积的“温暖橙”为基调进行铺设,营造温暖阳光的质感,顶部展示产品名称和合作logo,增加产品的权威性和信赖度。


自上而下,控制大的间距和留白,分别设置了热门小站、一老一小专区、志愿者风采、活动回顾、学习园地等版块。全方面展示了小站的基础信息、输送了对孤寡老人和留守儿童的健康资讯、汇集了志愿者服务的风采、记录了帮扶活动的结果反馈、以及陈列了关爱老人和小孩的相关线上课程。



一老一小的入口及详情:通过大头图的形式加强专题感知,引导用户点击。详情内展示相关的关爱资讯和助力入口,让用户可以选择性的进行点对点帮扶。



小站详情:分为小站介绍、人员风采、小站活动、和运营概况四个部分,清晰展示线下暖心小站的各项事务,让线上用户对线下小站有更全面的了解。



个人中心:功能简单,布局简洁,根据不同身份类型展示不同入口。作为站长的话,拥有志愿者审核、活动管理的权限,整体表现形式以统一的卡片式陈列,让内容更聚焦。




秉持“简单、易用、温暖”的设计原则,尽可能地让产品陈列简单、操作流程易用、设计满足功能凸显温暖,让用户想用,让产品好用。


经过多次推导与线下团队配合,小站1.0在今年5月初上线,第一批试点小站正在使用中,得到了较多正向良好的反馈,为乡村的一老一小带去了许多暖心的帮扶行动。



上线反馈

 _



产品上线之后,通过在线上发布活动信息召集志愿者。在线上顺利举行了多场暖心活动,比如在重庆马蜂社区的服务站内为当地留守儿童举办了多项课业辅导的活动,在重庆周家寨服务站新建了日间照料室,提升老人的居住生活质量。


今年5月20号,在中国互联网公益峰会上,为村暖心小站进行线上交流展示,获得了很多与会代表的关注和认可。




截止2021年7月,平台上线了两个试点小站,共举办了数10次线上+线下结合的活动,活动参与了520人,受到36000人以上的关注。暖心小站的建立和运营,对乡村的“一老一小”提供了更加有针对性和个性化的服务,同时加强对当地社会组织的培育和孵化,提升了服务对象的生活质量,促进和谐社区建设,助力乡村振兴。


通过这些试点小站的成果和反馈,让设计目标也得到一定程度的印证,让产品体现了“有温度、有故事、可以连接情感”的桥梁。




设计反思

 -


随着互联网的发展,人们对于产品不再是简单的形式服从功能,而是逐步转向形式服从情感。让设计回归情感,让有温度的设计去创造有温度的产品,可以增进人与产品之间的情感连接,让产品更有生命力。再者,用有“温度”的设计思维,去捕捉和解决社会问题,通过具有社会责任感的设计,推动社会进步,形成坚实有用的“设计力”。


那么,如何提升自己的设计力呢?可以概述三个保持一个向善。



保持热忱心

设计需要坚持,而坚持源于热爱,保持热忱之心会发现许多美好的事物,同一个需求会自发性地探索很多不同的解决方案,因此会洞察需求背后最本质的东西,切入要点寻找最优解。


还有一句话:“设计路上,唯有热爱,方能抵御岁月漫长”。


保持敏感度

这里的“敏感”指的是设计师要有好奇心,善于发现新事物,善于追踪最新行业动态,是一种职业敏感,是一种自觉行为,表现为热情、兴奋、敏锐,对新事物充满热情,对于新发现充满兴奋,能够特别敏锐的捕捉社会痛点解决设计难题。


保持共情力

生活中常说,有共情的人往往都特别感性、多愁善感,泪点低笑点也低,因为特别有代入感,而且对事物特别专注。


设计上所说的共情力则需要保持感性,同时也需要理性加持,不偏不倚。让设计师自己能切换到项目内的各种角色,不把自己当成局外人,将自己融于产品本身,随时切换为不同用户的视角,更能深入地发现、分析和解决问题,让设计站得住脚、更接地气,让设计有依有据。


让设计向善

设计的最终目的是传递需求、解决问题,这就意味着设计的初衷不同,那么最终的导向也会截然不同。

设计向善,保持“善”的初心,主张设计回归社会、回归到人心最本质的出发点,做有温度的设计、有仁心的设计、可持续的设计。


关注社会问题,保持一颗敏感而善良的心,用“设计向善”解决社会痛点,坚实巩固自己的设计力。


文章来源:站酷   作者:峰HENG

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


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

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


「新手向!!」“8点”网格系统是什么?

鹤鹤

一、前言

1、代码>原型

无论是高保真还是低保真原型,设计人员在软件中的展现所有效果,最终目的都是传递给开发人员进行实现。当开发人员开始使用代码还原页面时,设计就不可以再随意修改。

最重要的不是在设计软件中展现的效果,而是实际在用户设备上实现的效果,因此在设计时,要提前考虑代码实现的成本。

2、盒子模型

盒子模型是一种描述对象尺寸和间距的方法。有四个部分组成:“边框Border”、“边距Margin”、“填充Padding”、“元素本身Element”。

  • Border:围绕元素外围的边线。

  • Padding:元素及其子元素之间的间距。

  • Margin:元素和其相邻对象之间的间距。

3、什么是point(pt)

点(pt)取决于屏幕物理尺寸大小,是绝对尺寸单位。对应@1x图的1px。

像素(px)取决于实际屏幕显示分辨率,是相对尺寸单位。在@2x图情况下1pt=2px,在@3x图情况下1pt=3px.

4、@1x

建议使用“@ 1x”进行设计,其他尺寸图可以从@1x进行衍生。

如果是以@2x进行设计,那么若要得到@3x则要先缩小50%然后再扩大300%,增加了不必要的工作量,并且很容易出现奇数、小数等不便利数值。

5、使用像素网格

创建的每个UI元素都应该和像素网格对齐,防止出现半像素的“锯齿“效果。

文本由于其图形的特殊性,难免会出现无法对齐像素的情况,这里可以忽略。

6、文本元素

文本是页面中最重要的元素之一,但因为其本身的多样性,产生的不同的字体、行高很难和其他元素一起适用网格。因此给文本设置基线网格,将基线网格采用4pt进行等距划分,来和其他元素进行和谐搭配。

二、8点网格

1、基本原理

使用8的倍数来定义区块和内部元素的尺寸,间距等。

当区块元素为文本(例如按钮)时,将文本设置成其余部分一致(或者平台预先定义好)的大小,然后使用padding来确定区块大小。如果是全宽的元素,使用padding来确定高度,并使用一致的水平边距来确定宽度。

2、两种方法

  • 硬网格:将元素放置在以8为增量定义的显示网格中,使用额外的透明背景元素,和前景元素组成一个整体。

  • 软网格:保证元素之间的的间距为8的倍数,以此获得更快的处理速度,从而得到更流畅的体验。

三、为什么重要

1、保持一致性

当所有尺寸都遵循相同的规则时,就有了一致的UI。

2、更少的决定=更少的时间

减少自定义的尺寸规则,得到更快的代码运行速度。

3、多平台设计

无论设备外形如何,主流的屏幕的屏幕尺寸长宽值至少有一个维度可以被8整除。

有一些屏幕的尺寸无法被整除(iPhone 6的375*667pt),只需要保持padding和margin一致,适当调整区块的大小来进行适配。

四、实施技巧

1、对齐网格

确保开启了“对其像素网格”选项。

2、Rems和变量

如果根文根大小设置了16px,则可以使用0.5rem的增量在8点网格上构建布局。

如果不喜欢这样做,或者是不喜欢rems的使用方式,可以使用CSS或预处理器间距变量来处理布局,同时保留变量以供后期维护。

3、定义你的网格

大多数软件都可以设置快速“微调”,一般默认为10px,sketch中可将其调整为8px,便于快速的工作。

4、捷径

学习并善用快捷键,提高工作效率。

5、框架你的图标

图标设计通常需要进行视觉修正,因此,在其周边放置透明框架(例如Hard Grid的方式),来保证整体的一致性。

6、放大、缩小

设计时经常会放大预览界面来进行设计,这会导致会略整体;如果以缩小的尺寸会导致看不到细节,因此要经常变焦画面来确保能看到整个画面。

文章来源:站酷   作者:YMOOM

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


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

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

这些高级UI设计趋势,我不允许你还不知道!

鹤鹤

正文


如果移动应用程序不符合最新的设计趋势,那用户可能会放弃你设计的产品。 

考虑到趋势永远不会保持不变,而且总会有新的趋势出现,让应用看起来既现代又漂亮是一项挑战,但遵循设计趋势对于每个产品设计师来说都是必须的。 

我们了解到,跟踪行业中的所有趋势和趋势并不总是可能的。总是有新的指南、动画内容、视频、新的插图方法以及许多其他概念,您需要先抽出时间学习和测试。 


这是我们总结出的 2022 年移动应用 UI 设计趋势

1、运动和动画 
2、手势和滑动体验 
3、90年代风格 
4、图形深度 
5、黑暗模式 
6、排版 
7、增强现实和虚拟现实 
8、渐变和透明元素 
9、舒适的视觉效果 



1、动效和动画

我们都喜欢看视频,并在 TikTok 或 YouTube 上花费大量时间。视频内容和动画更具吸引力和互动性。统计数据显示,大多数人在使用应用程序之前都会观看说明视频。动画和动作设计使内容更具吸引力。 

与具有长描述的静态内容不同,动画可以保留用户的注意力并使应用程序更具吸引力。用动画突出重要的东西是一个好主意。例如,您可以为应用程序中的按钮设置动画,以使用户与应用程序的交互更好、更直接。像图标动画这样的微动可以显著改变您的应用程序的体验。 

借助动画,您可以强调应用功能、提高转化率甚至销售数据。 




2、手势和滑动体验

与电脑上的网页端相反,手势和滑动体验使移动设备更具吸引力。我们每天花费数小时滚动和滑动操作。按钮和其他动作可能会刺激和分散注意力。这种设计趋势成为现代应用程序设计的最高优先事项之一。一些应用程序创建者甚至根本不支持按钮的使用。按钮会造成混乱并占用过多的屏幕空间。 

建议用滑动功能替换按钮。尝试滑动动作的动画会很有帮助。例如,图书应用程序通常使用动画来翻页。 




3、90年代怀旧风格

90 年代的风格影响了所有领域,甚至是移动应用程序的设计。 

设计师使用类似于 90 年代流行的 PlayStation 游戏(例如,马里奥或吃豆人)的复古字体、图像、图形。拥有 90 年代的氛围,您有机会获得两代人的兴趣:年轻人喜欢复古的东西,而老年人则喜欢怀旧。 

这种趋势并不适合所有产品,但如果复古风格适合您的应用程序,尝试一下也不错。 



4、赋予图形深度

扁平化设计看多了用户会觉得很沉闷。人们喜欢看到更真实和互动的内容。图形中的阴影和图层赋予它们 3D 效果、体积和深度,使人们可以享受更逼真的图像。 

这种趋势可以与任何元素一起使用,在屏幕上创建对象层次结构并帮助用户更轻松地浏览应用程序。 

然后,关于3D效果,我们来聊聊。3D 是一项革命性的技术。3D 图形几乎可以在任何应用程序中使用。例如,开发人员可以使用 3D 成像技术来构建存储建筑物和房间内部地图的应用程序。它可以非常适用于游戏并改变玩家的整体体验。因此,在您的应用程序中为图形添加深度时,请考虑 3D 趋势。 




5、黑暗模式

暗模式是已在许多应用程序中高度使用的最大设计趋势之一。最近,设计师也提供了在应用程序中在标准模式和暗模式之间切换的机会。所以用户可以选择他们最喜欢的任何模式。 

深色主题设计将背景变为深色模式,并使字体和其他元素变为浅色/白色。 

例如,现在在 Facebook 等最受欢迎的应用程序中都可以使用深色模式。切换到深色模式有助于人们减轻眼睛疲劳并更方便地浏览。 




6、排版

选择正确的字体是移动应用程序设计中必不可少的一步。用户在浏览页面的时候不是一个字一个字的读的,而是成行的“扫描”方式来浏览。因此,使用能够正确设置重点的字体非常重要。 

设计师已经开始使用不寻常的字体。文字不再看起来那么无聊,也不会迷失在背景中。其目的是使设计更明亮、更新颖。 

正确选择的字体将有助于:
1、定下产品调性; 
2、提高品牌知名度; 
3、提供更好的视觉体验; 
4、提高可读性。 

通过组织排版为您的用户提供愉悦且可读的用户体验:设置点大小、行距和层次结构。 

请记住,不寻常的“疯狂”排版并不适合所有产品。定义文本在您的应用程序中的具体功能。如果它提供了额外的信息功能,请不要对字体进行太多实验。但是,例如,在在线杂志中,您可以使用各种版式,使布局更有趣。 



7、增强现实和虚拟现实

虚拟现实和增强现实为用户提供了一个难得的机会,让您只需通过手机即可获得互动体验。 

在新一年中,这种神奇的 UI 移动设计趋势趋于增长和传播。这种设计趋势的关键在于应用程序的界面让您感觉自己置身于应用程序中。引人入胜的设计元素和游戏化是这种体验的关键。 

这是一个结合我们之前讨论过的趋势的绝佳机会,例如动画和 3D 效果。首先,精心制作的动画和 3D 触摸可以在您的应用设计中支持 VR。 

你还记得那些来自 Instagram 的功能吗?让我们可以通过应用程序和移动相机将不同的角色放置在我们想要的任何地方吗?然后你就知道这有多有趣了。此外,它不仅有趣而且高效。例如,宜家使用 AR 来展示一件家具在您家中不同位置的外观。 




8、渐变和透明元素

这个UI设计趋势是关于渐变和透明度的。设计师通常在按钮和应用程序的背景上使用渐变。移动渐变趋势突出了应用程序的基本部分,并使人们专注于特定方面,从而赋予他们层次感。 

移动应用程序设计中的透明元素表达了对某些应用程序部分的深度和驱动力,使设计更清晰、更具吸引力。 

您可以使用从浅色到深色主题的过渡,从而将屏幕分成两个逻辑部分。此外,您可以在按钮上使用渐变主题,使它们在屏幕上弹出。 

玻璃拟态的概念也值得一提。glassmorphism 背后的想法是柔化明暗设计元素之间的对比。设计理念使用类似于磨砂玻璃表面的透明模糊背景。 

玻璃态的主要特点:
1、透明度和背景模糊; 
2、透明物体上的细光边框; 
3、分层; 
4、鲜艳的色彩。 




9、舒适的视觉效果

舒适的视觉效果是大部分用户都喜欢的。用户和应用程序开发人员都喜欢这种最近的移动应用程序设计趋势。 

移动应用程序设计不应该只是美观。它应该让我们的眼睛看起来更舒适。因为一整天,我们可能都会盯着屏幕看,但看多了,我们会感到疲劳和眼睛疲劳。为了减少这种不利影响,应用程序开发人员创建了一种我们可以舒适使用的设计。 

舒适视觉设计趋势的概念是为您的应用程序使用自然的色彩、舒缓的图像和简单的布局。这些技巧通常可以在冥想应用程序中找到。它们包括自然的真实照片,具有平静的色彩和结构简单的轻元素,很少有深色主题设计。 




如果让你的UI设计更好呢?

这里有一些建议: 

1. 多看别人的优秀设计
分析它们的优缺点,从他们的经验中学习。 

2. 使用标准导航
不要使用异型的导航栏,这会让你的用户迷失在应用中。 

3. 使用优质的配图
抽象艺术、插图、真实照片趋势——一切都有助于吸引用户的注意力。 

4. 多看前瞻设计趋势
实时更新自己的设计知识库,使设计水平使用保持一流。 

5. 擅于总结与回顾
可以计划,三个月或半年总结回顾之前设计,总结不足之处。 

6. 多于他人分享
做设计不要怕被人看,或许有时候别人顺口一说,就点开了难题。 

7. 保持良好的心情
遇到事不要慌,掌握好自己心情,才能掌握好你的设计。
文章来源:站酷   作者:UI范
分享此文一切功德,皆悉回向给文章原作者及众读者.


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

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


浅谈B端设计系统

鹤鹤

什么是设计系统?



设计系统 = 设计价值观和原则+设计规范+场景定义+工具包

是在设计价值观和原则、设计标准指导下的各种共享的设计模式和组件资产,,是将产品设计团队联合在一起共同打造的一套质量和效率上都有所保障的可行性解决方案,能够解决产品视觉、交互体验一致性的问题、帮助传达统一的品牌认知。帮助团队快速完成产品迭代和功能开发! 

为什么要构建设计系统?


问题1:

随着业务的拓展,产品和项目数量不断增加,发展中期设计和交互上不一致性的问题浮出水面,需要采取措施确保产品或产品线之间保持统一的品牌传达、外观和体验,以满足用户预期并向其传达统一的品牌认知。

问题2:

无统一的设计规范和交互原则,没有统一的UI组件库和代码库,各团队设计和前端需花费大量资源陷于低质量沟通协作和重复造轮子,拖慢产品和项目设计和开发节奏。

问题3:

产品项目数量 vs 产品设计师,人员配比严重不足的情况下,团队的设计师们无法从杂/乱/急的日常需求中剥离出来,影响构建产品壁垒的质量和速度。

设计系统的价值


产品侧:

保证可复用模块的交互体验的一致性。如同一个产品类型不同分支多个团队完成的时候,可以保证产品团队使用同一份设计规范快速完成产品原型设计。 

设计侧:

把设计师逐渐从不必要、重复性劳动中解放出来,节约出来的时间和精力放到更多有价值的工作上去。更多去关注对用户需求和业务逻辑的深入挖掘,如果每个设计师都具备产品用研、交互、组件化等一条龙能力,才能体现tob产品设计师的价值,才不会被别人称作是拖拽组件的“工具人”。 

开发侧:

形成开发资产,可以提升研发效率,降低维护成本。开发工程师无需再重复开发同一个组件,只需要去组件库里调用即可,配合业务逻辑,高效完成界面开发。做到开箱即用。 

测试侧:

标准化的设计规范,是测试人员最喜欢看到的。1是1,2是2的设计准则,提升了测试效率。例如,设计规范规定弹窗footer区按钮组居右,那么测试人员只要测到不居右,就可以给产品提优化建议了。 

主流设计系统-他山之石可以攻玉!


无需犹豫,直接基于现有的优秀的开源设计系统,

设计系统的打造不必从0-1构建, 例如:Ant Design业界优秀的开源设计系统,我们完全可以站在前人的肩膀,最终生产出符合达观品牌、业务特性的设计系统。


阿里Ant design:https://ant.design/docs/spec/introduce-cn 
阿里的teambition:https://design.teambition.com/ 
华为devui:https://devui.design/design-cn/design-value 
饿了么elemnt:https://element.eleme.io/#/zh-CN 
有赞:https://design.youzan.com/index.html 

字节跳动 Semi Design:https://semi.design/zh-CN/

字节跳动 Arco Design :https://arco.design/

Material Design:https://material.io/ 
Lightning Design System:https://www.lightningdesignsystem.com/ 
Microsoft fluent :https://www.microsoft.com/design/fluent/#/ 
eva.design:https://eva.design/ 
Atlassian design:https://atlassian.design/ 

以原子理论构建设计系统


原子理论设计介绍

首先原子设计理论并不是什么高大上的规则。最早是由国外前端开发工程师 Brad Frost提出的,他从化学元素周期表中得到启发,发现在化学世界中,所有的物体都是由原子构成,原子组合构成分子,分子组合构成有机物,最终形成了宇宙万物。根据他的理论,设计体系主要包含 5 个层面:原子、分子、组织、模板、页面。


原子理论设计不是一个线性的过程, 它更像是一个心理模型,来帮助我们把用户界面看作是一个连贯的整体,同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面,让我们更深入的了解每一个概念哦~


原子层(Atoms):

原子是物质的基础组成部分,是构成设计系统的最基础元素。

在界面中以「元素」的形式存在,例如:颜色、文字、图标、分割线、间距、圆角、间距、阴影等。

简单概述下来就五个字:色、形、质、构、质;



分子(Molecules)层

在界面中,分子就像是一个由UI元素组成的相对简单的组织。如:按钮、弹窗、搜索框等。

以按钮为例,它的组成元素包含了文字、色块、图标和间距。这些抽象的原子从毫无关联原则组合成一个分子,图标和文字互相配合传达意义,颜色定义了按钮的特性,间距为按钮定义了一个尺寸和规范。


 组织(Organisms)层

分子+原子组合成更复杂和可扩展性的模块,这个称之为组织(区块组件),如:列表操作区块、列表展示区块、表单区块、数据统计卡片区块。

以表单为例,一个表单我们可以通过数量的组合,以及间距的调整,元素的增减,在界面中表达不同的场景和含义。



模板(Templates)层

由原子+分子+组织构成的更复杂更具拓展性的模块,如:分组表单页、页面级表单、详情页、列表页、异常页、dashborad。本质就是线框图,模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。专注于页面的底层的内容结构,页面中的信息是占位作用,而不是页面的最终内容。


页面(Pages)层

带业务逻辑的场景案例如:标注详情场景、抽取详情场景、权限管理场景。页面将真实内容应用于模板;

页面是模板的具体实例,填充了真实的内容(图片、文字等)后形成页面,也就是常说的带交互逻辑的「视觉稿」即为高保真原型图,将占位符替换为有代表性的真实内容,使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的设计方案。



关于设计系统的常见认知误区



误区1:设计体系就是设计规范或者组件库吗?

许多人认为设计系统就是单个代码库、组件库、设计规范,但实际上他们不是一个层次的东西,准确度的来说设计体系包含设计规范,组件库也是建立在设计体系内的,组件库是记录和共享设计模式的工具,就是设计体系工具化和表现层的部分;


误区2:设计体系的存在扼制了组织内创造力,会替代掉设计师?

抛出这个问题,是因为经常在不同的场合听到“设计系统是扼杀设计师的创造力”之类的观点,我个人是很难以认同这个的,对design system的最大误解就是限制设计师的想象力。首先设计系统本身就是一个庞大且复杂的设计观集合,需要调动整个团队的想象力和创造力,最终达到一个统一共识才有可能被实施和执行;

好的设计系统可以通过流程和机制促进创造力的,而且好的设计资产可以帮助大家从不必要的、重复的劳动时间内节省出来,当然也不能过度依赖过往的沉淀资产,把自己定位为设计系统的创造者,而不是使用的工具人,不断的创造和贡献好的解决方案被整个组织采用,就不必再担心那些即将沦为沉没成本的过往设计与技术资产的限制。不会替代掉设计师,反而是一个企业内部尊重设计师价值的开始!是企业对设计文化的认可!


误区3:设计系统是一劳永逸的吗?

设计体系是动态的,永远是随着组织需求和用户需求而变化的,一切说自己已经完成了设计体系的建设的人都是错误的,都是将将静态的设计规范曲解成了设计体系。


误区4:设计系统由少数人员生产,我们负责用就行了?

正确管理机制:少数人负责管理,多数人参与贡献;避免你做、我用模式,这种生产消费模式非常内卷;避免如:我一个设计师为啥要用你的规范;这规范做的太垃圾用处不大,我才不用,用你做的规范;我苦逼做业务,你晋升拿结果的负面心态;

然设计系统也不是简单的靠少数的人1-2个月用爱发电就能完成的,设计系统是一群人,对一种做设计文化的认可,每个与之相关的人都应该是设计体系的贡献者与布道者!


需要克服的潜在难题


当然设计体系也容易出现一些缺点,这些问题需要设计体系的构建者们去摸索去克服; 
  • 产品业务复杂性提升,提升建设难度

  • 难以控制创造与控制间的平衡;

  • 复用与定制间的平衡,刻意追求复用率而容易丢失整体观,为特定业务目标服务时不如灵活集中化式方法等

  • 资源问题,容易被当成是辅助项目而缺乏预算等资源….

  • 缺乏良性有效的组件库更新迭代机制,虎头蛇尾….

  • 收益短期不明显,搭建体系的长期收益难以被组织短期内察觉;


尽管有一系列潜在的问题,但总的来说设计体系的带来的收益是大于这些投入的,总的来说方向是没错的,下一个关键问题是:我们如何去建立一个更优秀的设计体系。

文章来源:站酷   作者:从你的世界经过



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


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

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


深入聊聊“用户体验设计”那些事

高劲

我们创建用户体验的设计方法为“以用户为中心的设计”。

日历

链接

个人资料

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

存档