首页

超全面的设计底层理论,优秀设计背后离不开这些

分享达人

设计趋势年年在变,设计技能也在不断更新,但回到本源,底层的理论知识是不会变的。我自己几乎每年还会翻看一些讲设计基础的书,比如《写给大家看的设计书》之类的,会发现这些原理每次看都会有新的收获。

随着工作年数增加,对底层知识的价值认识也越来越深刻,不知道你会不会有这种感觉?

【设计理论】B端产品用色指南

分享达人

我们需要什么样的配色方案?


B端的系统的主色代表着一个系统的气质,与所在行业、产品的定位、用户群体都有一定的关系。前面调研了众多竟品及市场前沿配色方案,目的就是期望从它们身上找出共性,引领我们的系统找到最适合的方案,这是知彼。

光有“知彼”是不够的,我们还要清晰的知道自己是谁?这样我们才可以说我们的配色方案是最适合我们的,有理有据的方案。


B端系统的真正使用人群比较复杂,具有年龄跨度大,文化水平参差不等,从事行业广泛等特点。



源于自然之美的色调,突显灵活性与再生的创意!


依据彩通色彩研究所专家的说法,纽约时装周2021春夏季的色彩强调我们渴望能激发出巧思与创意的色彩,这些色彩的百搭性质穿越季节,容许更多的选择自由,适于表达原创的风格,也足够灵活来适应现代新的更片断化的生活方式 。

“2021春夏的色调呈现出大自然,强调我们渴望拥有全年皆宜的灵活色彩,这一季的色彩充满道地真实的感觉,这种感觉对色彩而言愈来愈重要,同时结合了某种程度的舒适与轻松感,并散发出活力,激励振奋我们的心情”




说到这里“主题色”如何来选择?


色彩对于人的大脑的冲击力大于造型,比如淘宝,我们会记忆起淘宝的主色是橙色;色彩是影响人类视觉思维的重要因素,色彩能直观的体现产品的性格和气质,所以选择一款适合产品的主色很重要。


我们的用户在更替,如何让产品年轻化、品牌年轻化是现在几乎所有企业都在思考的问题,新的用户群体从小接受的教育和喜好决定着产品的发展方向。

比如:我们这次颜色升级中律动、青春活力是核心关键词,而蓝色则可以让产品视觉符号得到延续。





对于主题色的选择指标有哪些?


通过关键词图片像素化提取颜色,同时参考B端产品颜色流行趋势和当年的年度流行色,以及竟品颜色分析结果,获取蓝色的色相、纯度、明度范围。


2020潘通年度颜色经典蓝(19-4052 Classic Blue),颜色值为#174A7B(H207 S81 B48)

2021潘通年度颜色搭配色鸟舍系列中19-4151Skydiver,颜色值为#02569D(H207 S99 B62)


假设:竟品的主题色蓝色的色相范围为205-225;纯度的范围为70-96,平均值为86;明度的范围为70-98,平均值为88,B端产品流行趋势的主色也多是蓝色系,色相范围为200-232;纯度的平均值为70;明度的平均值为68。





色彩的使用范围及色阶有哪些?


色彩的应用场景包括:关键行动点,操作状态、重要信息高亮,图形化等场景;针对这些使用场景只有一个色值是不能满足所有场景使用的,所以我们要建立主题色的不同色阶来满足不同场景下颜色的使用。以建立色彩层级,或传达信息,或强化界面层级。


在色彩系统中,常使用 Tints and shades 系统来建立调色板,通过在颜色上面增加白色,或者增加黑色,来改变它的明度和饱和度,形成同色系的调色板,在符合无障标准的区域,选择不同明度饱和度的色彩,形成有梯度、有层级的彩色调色板。





B端产品中光有“主角”是不够的,还要有“配角” 所以我们还要看一下辅助颜色是如何定义的?


辅助色是为了帮助页面区分状态和层级而设立的颜色,主要包括图表类仪表盘颜色和功能色,通过合理的颜色传递产品正确的信息,让其信息传达更明确清晰。


辅助色的作用是配合衬托产品主色调,在不同的产品中,辅助色运用的策略是不同的,比如我们在竟品调研中发现,辅助色经常是取自主色的邻近色、对比色和互补色等。


仪表盘配色:通过对竟品的分析可得知,优秀的仪表盘的配色有多系列及低纯度的特点,多系列配色是为了满足用户个性化的需求,而低纯度是考虑用户在长时间使用产品,色彩对其心理的影响。


功能色:这类颜色在系统一般不会随意更改,而且特定的语义一般都有固定的色相,只需改变其纯度和明度,使其视觉上符合主色的气质,使其搭配和谐。


1.通过默认主题色选择辅助色及默认仪表盘颜色

我们以默认主题色为#467FEA(H 219 S 70 B 92) 为起始点,S(饱和度)、B(明度)保持不变,H(色相)以180°为起点,以15°为增量或减量标准,生成24色色板。这个色板是我们选取辅助色的重要依据。






以邻近色、互补色、对比色为原则选择丰富的颜色


邻近色:在色相环中,相差15°的颜色为邻近色,凡在60°范围内的颜色都属于邻近色的范围,主色和邻近色的色系组成的搭配,可以在同一个色调中构建出丰富的视觉层次感和质感,赋予不同的功能含义,信息表达明确,和谐统一感很好,视觉上的趣味性,颜色的搭配显得很柔和。


对比色: 在色相环中,角度相差120°-180°之间的色彩,这里使用了120°为角度来选择对比色。


互补色: 在色相环中成180°角的两种颜色,互为补色;主色可以和其互补色的两个色彩的搭配,该色彩可以为邻近色,例如:蓝色和黄色、橙色的搭配;这种搭配既能保持互补色搭配强烈的对比度,区分关键信息,次要信息,又能增加视觉上的趣味性,色彩看上去丰富多彩。


例如:蓝色作为主色,互补色黄色作为辅助色应用在图表、图标和标签上,再选择黄色的邻近色橙色作为另外一个辅助色,应用在不同的关键信息上,有助于用户更好的阅读产品的功能和内容。





获得辅助色-9色相


通过邻近色、互补色和对比色的选择,我们从24色色相环中得到了9色相色环,9色相色盘优化后将做为图表的仪表盘颜色和语义类的功能色出现页面设计中。





校正辅助颜色


虽然我们保持相同的饱和度和明度,使用科学的方法得到了较为合适的色相,但由于色彩本身自带感官明度属性,导致在视觉感受上的感官体验并不同频。


黄色、绿色的明度即发光度较高,蓝色就稍微偏暗一些,导致色板看起来不一致,为了让不同色相看起来更加协调,需要调整色板的明度和饱和度,以保证视觉感官体验同频且更加和谐舒适。


校正后的颜色主要用于功能色和仪表盘颜色。







从辅助色中提取功能色及仪表盘色系


通过对竟品的分析总结同时结合默认主题色分析得出的9色色环,归纳分离,最后形成系统的默认仪表盘颜色。


功能色的目的是明确信息及状态,比如成功、出错、失败、提醒、链接等;功能色的选取需要遵守用户对色彩的基本认知,结合分析得出的9色色环,颜色校正,得出系统功能色。






辅助色的色阶


为了度量不同的可视化从高到低的数值,我们仪表盘颜色远远不够,所有为了保证视觉上的统一性,我们需要加入辅助色的明度色阶来区分数据层级。


同时我们产品有深色和浅色两种模式,由于视觉对比的原因,在深色的场景看下看的颜色,和浅色场景下看到的颜色是两种感受,深色场景下颜色会发亮,所以为了保持视觉上统一,我们也需要加入辅助色的色阶。


辅助色色阶建立方法与主色的色阶建立方法一致,使用 Tints and shades 系统,通过在颜色上面增加白色,或者增加黑色,来改变它的明度和饱和度,形成同色系的调色板。






模拟方案一主色、辅助色及消色汇总


通过以上分析我们得出模拟的主题色、仪表盘颜色、功能色及消色。为了方便记忆,我们分别给颜色取了名字和编号,命名方式采用植物色彩命名,这也是200多年前颜色数值出来之前的命名方式,最早见于1814 年出版的《维尔纳色彩命名法》





作者:CC小酷
链接:https://www.zcool.com.cn/article/ZMTI5OTAwMA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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


【设计理论】UX交互设计中的文案规范

分享达人

文案的重要性:


说到文案在交互设计中,我们需要通过对话的方式和用户产生共鸣,精准、清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感,因此在界面设计时,文案运用也应当被重视,在使用和书写文案时有以下几点需要注意:

1. 从用户或角色的角度出发,角色换位思考一下,所谓的「同理心」理论;

2. 表述一致;

3. 重要的内容放在显著的位置;

4. 专业、精准、完整;

5. 精简、友好、正能量;

在界面中,文案是我们与用户或角色沟通的基础,语言文字的表述也需要精心推敲,仔细设计;清晰、准确、简洁的文案设计能够让界面拥有更好的可用性,同时让用户体验更加友好;

接下来就是要明确表述立足点,这个很重要,在表述内容时,关注点应该是用户和他们能用你的产品做什么,而不是你和你的产品在为他们做什么,所以内容表述立足点很重要;(当用户向后台反馈问题、提出建议或申诉时,使用「我们」是合理的语境,例如「我们将会审核你的申诉」);


举个例子:






精简语句:



省略无用词汇,不重复用户已知事实;在绝大多数交互场景下,都无需界面描述出全部细节,尽量提供简短、易于快速获取的内容;

例如:







使用用户熟悉的语言:



使用简单、直接、易于理解的词汇,让内容和指示更容易被用户接受和理解,间接、暧昧模糊的说法,生僻和过于“文雅”的用词,会增加用户的认知成本,所以应当尽量避免使用这类用户无法识别的词汇;

例如:





表述一致:



描述同一个事物的词汇要保持统一;上下文的语法、语种、语序要保持统一;操作的名称和目标页面标题的名称保持统一;

例如:








重要的信息放在显著位置:



让用户第一眼看到最重要的内容,不用到段落中寻找;(如果考虑安全性问题时,隐私信息也可调整为「点击后可见」的方式)

例如:





完整、直接得阐述信息:



当我们希望用户进一步操作时,要专注于用户能得到什么,以及用户的感受;在操作前引导告知用户操作的目的或重要性,能促进用户更愿意去执行;

例如:




报错是 UI 中常见的功能,它同样是用户体验中不可小视的组成部分,当用户填写的内容出错的时候,你的报错信息应当符合用户的认知,用易于理解的方式表述出来;




用词精准完整:



通用基本用语,要规范,不能出现错别字,词语表达完整;专业用语要精准,并且是所属行业认可的通用语言;时间的表述必须要明确;

例如:




这边列出一个语言模度的表单给小伙伴们参考:





语气运用规范:

语言定义的是内容,而情绪和气氛更多的是通过语气来表达,并且同样的内容面对不同的用户我们可以使用不同的语气来表达;例如,我们对应专业的运维人员和小白用户应该有不同的表达方式;



拉近彼此的距离:



直接使用「你」、「我」来和用户对话,与用户建立亲密感,避免使用「您」,让用户感觉太过疏远;

例如:





不要在同一个句式中混用「你」和「我」,交互中指代混乱会让用户产生疑惑,增加用户认知负担;

例如:




友好、尊重用户:



多给用户支持与鼓励,不要命令和强迫用户;如果你想留住你的用户,当出错的时候就不要责怪用户,专注解决问题而不是指责;

例如:





表述不能过于极端:



不要使用过于绝对的表述,这样会让用户感觉不适;

例如:




大小写和标点符号:



英文名词大小写规范:产品名称全称,首字母大写;产品名称缩写要全部大写,例如:SEO、SAP等;整个单词都大写不利于阅读和识别,应尽量避免这种用法;

例如:




正确使用专有名词的大小写规范

例如:




全英文的标题,标签,菜单项等等都要遵循英文句式中首字母大写的规范

例如:




统计数据使用阿拉伯数字:


这是常见问题,用户对于数字的感知速度更快,使用数字而非文字表述会更加有效;

例如:




省略不必要的标点:


为了帮助用户更加高效的扫视文本内容,可以省略不必要的断句点;

以下元素单独出现时可以省略标点:

A. 标签

B. 标题

C. 输入框下的提示

D. 悬停文本中的提示

E. 表格中的句子





以下元素单独出现时需要加上标点:

A. 多句或多段的文案和列表内容

B. 任何文字链前的句子





感叹号使用规则:


感叹号会让文案显得过于激动,容易让气氛变的紧张,功能类少用;但是向用户表达问候或祝贺时,使用「!」是合理的的语境,例如:「欢迎回到社区!」

例如:




基本标点规范:


正确使用标点符号会让句子看起来更加清晰和具有可读性;具体使用可以看一下 1995 年中国标准出版社出版的《标点符号用法》,以下展示设计中需要注意的部分;




作者:CC小酷
链接:https://www.zcool.com.cn/article/ZMTEzMDI0NA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

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

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

优秀设计的背后,离不开这11个应该掌握的底层理论

博博

1. 奇数原则和三分法构图


奇数法则意思是说,在设计作品中奇数元素比偶数元素更有趣。偶数元素在图像中产生了对称,这可能会显得过于正式和不自然。比如,在一行中排列三个或五个卡片会比 2 个或 4 个效果更好,作品会更加让用户感到舒服和自然。

设计原则 设计方法 设计理论

Iskos Design 就是用的奇数原则做的网页设计

三分法构图(也被称之为黄金网格规则),在画面中以水平和竖直方向分成 3×3 的网格和 4 个交叉点。这个规则能很好的协助设计师将最重要的元素放在网格的交叉点上,这样可以很容易的设计出满意的构图。

为什么会这样?因为三分法构图创造了类似斐波那契数列(黄金比例)那种不对称的美,产生了更有吸引力的构图。

设计原则 设计方法 设计理论

2. 视觉引导线


你希望用户关注哪些地方?高级设计师非常擅长引导用户的视觉焦点,这种引导可以通过可见和不可见的引导线来完成。这些线条在构图中也可以打造一种动感,也能为画面增添视觉冲击力。

达到这种效果通常用特定的形状和线条,或者是它们的组合形成难以察觉的引导线来实现。利用透视、颜色、对比度和正负空间同样可以帮助达到这种想要的效果。

设计原则 设计方法 设计理论

从左到右的不易察觉的曲线将用户的视线引导到页面文字上

3. 大小和比例


大小(scale)是设计中一个元素与另一个元素的相对大小。元素通过大小不同创建视觉层次,其中最大的元素首先会吸引用户的注意力,因此看起来是最重要的。常规的设计策略就是将最重要的元素做成最大的,然后逐级递减。

比例(Proportion)不同于大小,类似但有区别。比例原则是指一个整体设计中各部分的尺寸关系。设计中的元素可以有各种大小,但它们之间的大小差异,整体来看就是比例。

熟练地使用大小和比例是实现设计统一的关键。当一些元素的大小过大或过小,或者比例失调时,设计组合就会失去统一性。这种错误可能发生在排版和其他元素上。例如,标题与子标题和正文相比显得过大。当设计元素失衡时,设计就会“感觉不平衡”。

设计原则 设计方法 设计理论

大小和比例都没做好时(左图),看起来处理的比较细致了,但依然没有做到很好,在大小上正文和标题分不清(右图)。

4. 强调


强调原则用于使设计的某些元素突出(使用对比、接近、比例、留白等)或不突出,即弱化强调(例如在页面底部有一个几乎看不见的“小字”)。强调是层级之母,因为没有强调就没有层级。

与其他一些设计原则一样,“强调”是用来引导人们关注设计,并强调需要重点关注的第一、第二和第三点。首页面和电商转化页面在 99%的情况下都使用这种原则。

设计原则 设计方法 设计理论

使用这个原则,在购物网站上强调了标语和产品,转化效果非常好

5. 统一性


统一是指设计元素如何很好地结合在一起,形成“视觉凝聚力”。它指的是设计中的连贯性,让人们觉得所有部分都是一起的。每个元素都应该具有清晰的视觉关系,以帮助传达清晰、简洁的信息。整体性好的设计比整体性差的设计更有条理,质量也更高。

运用统一的配色,重复、平衡和对称之类的原则将有助于在设计中形成一种和谐感,也就是一致性。设计中良好的一致性就好比歌曲中一首歌被和谐地唱出来,形成一个完美的整体。

设计原则 设计方法 设计理论

一致的颜色、重复的图案、平衡和对称在蒂芙尼的网站上创造了一种统一的感觉。

6. 接近原则


格式塔的接近原则让设计师将同类型的相关元素进行分组。把它们分开得更远,元素就显得越不相关,它们之间的关系就会减弱。一般来说,人们会认为远离的元素是不相关的。

不应该让用户在设计中分辨哪些元素是相互关联的,正如美国邮政服务的例子所显示的那样,缺乏对邻近性的关注会导致直接的认知紧张,损害用户体验。

设计原则 设计方法 设计理论

接近原则没做好的案例。由于字段标签离它们下面的字段更近,人们可能会搞混

下面是一个邻近性原则做的好的案例,我们可以看到相关元素是如何通过邻近性关联起来的(分组的元素用紫色表示)。

设计原则 设计方法 设计理论

一个把接近原则用好的网页设计案例

7. 一致性


一致性原则使数字产品的使用更加可预测,符合用户的期望。设计中的一致性可以培养熟悉度,它可以提高用户体验、可用性和用户使用效率。另一方面,不一致的设计将产生更多的认知负荷/脑力劳动,并导致困惑和挫折。这就相当于在用户的路径上设置障碍。让用户的心流嘎然而止!

做好一致性可以增强“审美凝聚力”。“我们都知道,当我们使用应用时,应用的导航位置如果经常变化,或者像“加入购物车”这样的主按钮在不同屏幕上从红色变成绿色,这是多么令人沮丧。

除了视觉一致性和易用性,品牌一致性在产品设计中也发挥着重要作用。如果没有一致的元素呈现,如排版、配色和图案,高质量的品牌体验将无法传递。

在用户体验方面,一致性意味着在设计中使用相似的 UI 元素来完成相似的任务,即在整个产品中拥有相似的功能和行为。因为可用性是一种评估用户界面易用性的质量属性,所以一致性对用户体验的可用性有很大的贡献。

设计原则 设计方法 设计理论

一致性是通过使用相同的配色、排版、间距、模式和交互来实现的。

8. 颜色


颜色在设计中是非常重要,几乎是设计中最具影响力的创意元素。一个深思熟虑的配色可以让一个设计从普通到惊艳,而一个平庸的配色会降低用户的体验,甚至阻碍他们使用产品的能力。

明亮、丰富的颜色比柔和的颜色更引人注目,因此有更大的视觉冲击。柔和的颜色可以提供一个令人愉快的,微妙的配色方案,但适当的对比必须要有,特别是文字,必须保证可读性。

颜色甚至可以用于呈现 UI 中的结构感并指向可用的交互,但为设计制作一个配色方案并不是一项简单的任务。除了品牌化,还必须非常小心地创造颜色的和谐和耐用性,使得它能在各个场景下都能正常使用。

色彩心理学也不容忽视。色彩承载着意义和情感,可以向人的潜意识传递信息。在品牌方面,人们对颜色做了大量的心理学研究,因为在人们与品牌进行任何互动之前,颜色会让他们产生一种本能的反应。例如,蓝色通常被认为是可靠的、安全的和平静的,想想银行;而红色是刺激的,被认为是增加人们的心率,想想饮料包装。

设计原则 设计方法 设计理论

一个极简主义的暗色主题设计传达了一个特定的品牌气质,并使用了少量的颜色。

9. 排版


排版在设计中扮演着非常重要的角色,它的重要性再怎么强调都不为过。在构图中,字体样式对人们感知设计的影响比任何其他元素都大,可能除了颜色。

因为我们的大脑以闪电般的速度运转,一个字体会对一个设计产生影响,以至于它可能在不到一眨眼的时间内改变用户的印象。与颜色一样,字体甚至会影响我们的情绪,资深设计师可以通过字体传达情绪和风格。通过选择合适的字体,我们可以传达出稳定、优雅、舒适、可靠、有力等信息。

排版层次结构可以快速建立视觉层次结构,并且通常在其中扮演重要角色。因此,在设计中经常使用不同的字体和字体大小来表示层次结构,例如标题、副标题、正文和引用。

“除了确保文本清晰易读,排版可以帮助你理清信息层次,传达重要内容,并表达你的品牌。” ——苹果的人机界面指南

设计原则 设计方法 设计理论

兰博基尼的网站巧妙地使用了排版风格和比例来赋予其设计力量。

10. 负空间(又名留白)


Claude Debussy 曾说过,“音乐是音符之间的空间“。同样的观点也适用于设计,元素之间的负空间给予设计强调、平衡和统一。

元素周围适当的负空间将焦点集中在元素本身。它强调了内容,并提供了必要的喘息空间,以确保布局不显得杂乱。没有了呼吸空间,人脑就不太可能扫描兴趣点,更容易感到困惑。

设计原则 设计方法 设计理论

苹果官网提供了一个利用负空间创造强烈焦点的杰出例子。

11. 最后


人们已经开始期待所有平台和设备上的优化、无阻碍的用户体验。理解设计原则及其交互方式对所有设计师来说都是至关重要的。使用专业技能设计它们是创造具有视觉吸引力的功能性设计的关键。我们不要忘记,美学的完整性会严重影响用户体验。

基于原则的设计是设计师在感觉有点迷失或用尽创意时可以依赖的黄金标准方法。在没有理解和实现设计原则的情况下,也可能实现可接受的设计。然而,这可能需要大量的尝试和错误才能创造出看起来不错的内容,并创造出最佳的用户体验。

产品的美学质量与它的实用性密不可分,因为我们每天使用的产品影响着我们和我们的幸福。但只有精心制作的物品才会美丽。— Dieter Rams(迪特尔·拉姆斯)

当我们不关注由设计原则驱动的设计质量时,我们可能会忽视品牌质量及其所代表的一切。当某些东西设计不好时,品牌就会受到伤害,产品也会受到影响。这就是为什么伟大的设计师在他们的工作中极其严谨, 他们知道“你永远不会有第二次机会给人留下良好的第一印象。”

设计的细节成就了设计本身。—— 查尔斯 伊姆斯(Charles Eames)

作者:彩云Sky

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

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

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

产品设计理论:理论是依附于具体背景的

雪涛

很久以前我写过一篇讲「用户体验」的文章,文中提到电影的观影体验是可以通过灯光、镜头、脚本、台词、道具、特效等等手段去塑造出来的。比如,《教父》中对灯光塑造角色形象的首次运用,营造出阴暗、冷酷、深不可测的角色形象,帮助观众去建立更立体的角色印象。

所以许多学习电影的同学会去分析电影里的某个镜头或某个片段的细节,聊这个镜头的拍摄用了什么样的手法,演员的表演传递出了一种什么样的信息,以值得我们去学习。于是许多学电影的新人就会以为,学好这些东西,就能拍出一部好电影。

但是作为一名导演,如果只关注这些细节去学习所谓的理论知识,而不知道这部电影背后的宗旨,支撑起整个故事脉络的重要信息,众多人物角色的复杂情感关系,以及剧本背景所表达的时代现象等等,那么就不可能在自己的电影里代入那些细节理论。甚至连如何推进到这样的场景都做不到,试问又怎么可能去聊某个镜头下的细节呢?

这叫缺乏上下文联系,也是任何行业的从业人员在学习该行业所需要具备的理论知识时,都会忽略掉的重要条件。

说一个真实故事。设计师 Teisanu Tudor 前阵子在 Instagram 上做了个实验。他扮演成一位资深 UX,每天通过网上找来的几张图片组成各种设计案例、教程、原则等帖子,分享在上面。受欢迎程度远超他的预期,而其中热度最高的帖子,是案例改版对比图,以及两个方案比较图,再加几句简单的总结。比如:

产品设计理论系列(二):理论是依附于具体背景的

通过这样的说法,难道就能认为现在所有 App 或网页上的 banner 设计都是错误的?当然不能这么随意下定论。

许多人都以为通过这种简单的几个步骤就可以学会设计,且认为这个学习过程是有趣且轻松,可以速成的。

Teisanu Tudor 说:这种速成贴如此火爆,不免让人有些担忧。这些帖子里的案例几乎都是脱离改版目标的上下文背景去探讨体验的,可许多人都忘了目标才能决定设计改版后的效果,而不是单独看起来如何。

或者这类:

产品设计理论系列(二):理论是依附于具体背景的

A 与 B,真的是 B 更好么?在不同设备与不同用户的条件下,仅仅通过视觉理论得出这样的结论,未免也过于仓促。

我们都知道,一个设计方案不可能适用于所有场景,设计师的主要能力之一就是在具体限制条件下,平衡好不同利益相关者,以及多个变量,产出合理方案。而类似这种帖子的火爆似乎在传递出一种信息,就是设计是不需要具体问题具体分析的,甚至通过这种细节的通用解法就能解决绝大多数设计问题。这就属于误人子弟了。

我经常会在一些地方看到有人在整理某个页面当中的设计细节,然后有模有样总结一遍,试图将其当做产品设计的某种理论或准则。比如截一张某款产品中的界面,说它的按钮摆放有问题,会导致用户如何如何,而依据就是之前得出的设计准则。其中最有趣的一次是,有个人拿着一款产品的设计方案去吐槽另一个产品的方案,说没对上…

在前面两篇理论文章里,我反复说过理论知识的重要性,它可以帮助我们产出设计方案。但是有一个点是没有被提及的,就是「理论知识的连接性」。

许多人会把自己看到或学到的东西看作是一个独立的知识模块,且希望在工作时能运用上,然而却事与愿违。于是渐渐排斥理论,觉得理论无用,形成一种认知,就是理论无用论。再也不去读书,不去学习理论知识,以至于在知识体系层面停滞不前,无法说明白自己产出的方案,只能说感觉:我感觉可以。

这些人再也不会去思考自己为什么做这个需求,以及这个需求的利益相关者是谁,用户的目标,企业的目标,甚至是这次需求的指标,而只是看界面从某个原则上来说是否合理……而这所谓的原则,只是一些无关紧要的东西,却被人当做设计圣经。

这就是理论知识逐渐被人轻视的原因,许多人本末倒置,再也回不到正确的那条路上。

比如,前阵子有位读者问我:呆总,你看 QQ 这里把一些未开通的特权放出来,吸引用户去开通,但是绝大多数直播产品的勋章体系也挺丰富的,却很少看见会这么做的,是为什么呢?

产品设计理论系列(二):理论是依附于具体背景的

类似这样的问题,在缺乏业务背景,商业目的,需求指标等前提下,是不可能得出一个绝对结论去证明其他产品为什么不这么做的。这是现在大多数人面临的问题,但却不自知。

就像我这个系列文章里说的一样,理论知识当然重要,但是破碎的理论,是有反作用的,所以需要串联,从全局角度出发,再深挖到细节。而不是只聊大方向,或只聊细节。

举个例子。当我们拿到一个需求,说要从 0-1 做一个长视频产品的弹幕体系。可能很多人就会无从下手,第一直觉想的是去找所谓的竞品抄一下。可能还会像上面那种对比图一样,把几个产品的弹幕界面截图下来比较下,试图从界面元素角度判断哪个设计得更合理。但是会发现,即使是抄,也会抄不到位,甚至会被老板质疑这个方案的合理性。而你能反驳的只是:别人也是这么做的。

而关于不同用户发布弹幕的权限,比如次数、时间限制、字符差异等重要信息,就被忽视掉了。包括各种违规弹幕,以及如何判断违规的弹幕,甚至是弹幕在屏幕上出现的密度、形式、速度等信息可能都无法考虑到。这就是现在许多设计师存在的问题 —— 过分专注界面元素,忽视其背后的信息。

虽然我在之前一篇文章里提到,注重细节的重要性,但是理论知识,从来都不是相互独立的,尤其是与项目相关的,更不可能从某个单点出发得出全面的设计方案理论。

如果你是刚入行的设计师,这么做无可厚非,就像学习电影的学生一样,它确实是学习理论的一种途径,只不过缺乏连接。但如果你已经入行一些日子,觉得自己进步缓慢,甚至感到迷茫,且读完我写的文章也意识到了这个问题,那你就要开始反思,自己对于理论知识的学习是否有主动去将它们串联起来。



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

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



文章来源:优设   作者:呆呆U理

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

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


学会用这5个正确姿势阐述你的设计作品,轻轻松松一稿过!

雪涛

设计风格是一种很虚的东西,对于大部分的 UI 设计师来说,都是如此。

相信很多人都是在一家小型的互联网公司做设计,估计还是公司唯一的设计师,同时对设计风格又拿捏不定,总感觉是跟着产品经理或老板的思路去做设计。比如老板的要求是“大气”,谁 TM 知道这“大气”指的什么鬼?

即使花了不少时间去研究其他公司的产品,依然做不出领导满意的视觉稿,最后还被各个岗位的同事指点着去修改你一把屎一把尿喂大的稿子。

我上面也说了,其实这种事情(讲述设计风格)对于视觉设计师而言是一种很常见的现象。我身边也同样有很多设计师出现这个问题,不知道如何向领导或客户讲述自己的设计风格。

小而美:清晰的可穿戴设备界面

用心设计

各种不同的穿戴设备

从简单的健康追踪设备,到能够与手机系统同步的功能齐全的手表,设计这些小屏幕界面时,有许多变种需要考虑。

1

开发人员应该知道5个设计技巧

蓝蓝

优秀的编码和优秀的UI设计之间是相辅相成的。不幸的是,视觉设计能力偏弱的人通常会觉得自己缺乏天赋,换句话说,就是人们要么觉得自己具有出众的美学天赋,要么就是这方面的白痴。对这个说法,我可不敢苟同。

如果你在一个小团队里面身兼数职,却又没有多少美学基础。又或者你觉得你们的项目在视觉上还有更多发挥的空间,那么这篇文章就是写给你的。蓝蓝设计将谈到传统的5个消除丑陋艺术设计的元素和原则(或者至少能够进行一定程度的掩盖)

1.来点留白

大多数的开发者并不在意添加空白的像页边距,填充,行高,或者其他任何增加空白的CSS属性。识别出开发者设计的界面设计是很容易的:文本都是紧紧地挨着边缘的,没有任何留白,而且屏幕元素之间是通过直线来实现分割的,而不是空白。

帮你完成创意十足网页设计的小技巧

蓝蓝

作为一名UI设计师,每年都会沉浸在一些新的界面设计趋势中兴奋不已。接下来,我们将探寻2014年的设计趋势,这绝对是意义非凡的事情。Web设计师必须洞悉所有相关领域的新趋势,紧跟时尚潮流。

这次,蓝蓝设计想探索一下那些逐渐发展起来的UI设计潮流。也许过去我们只是偶尔尝试一下这些设计风格,但是今年我们会真正关注它们。分享一下帮你完成创意十足的网站设计的小技巧。

更多网站设计技巧欣赏:http://www.lanlanwork.com/

更多留白/负空间

Nate Hanson

小技巧帮你完成创意十足的网页设计

蓝蓝

作为一名UI设计师,每年都会沉浸在一些新的界面设计趋势中兴奋不已。接下来,我们将探寻2014年的设计趋势,这绝对是意义非凡的事情。Web设计师必须洞悉所有相关领域的新趋势,紧跟时尚潮流。

这些新趋势让设计变得妙趣横生。但是很多专家还会倡导那些并非最时髦、最震撼世界的设计。当然,响应式设计不仅去年是热点,今年依然还会被人们重视。同样,栅格化设计作为最基本的设计,也会被继续延续下去。

这次,蓝蓝设计想探索一下那些逐渐发展起来的设计潮流。也许过去我们只是偶尔尝试一下这些UI设计风格,但是今年我们会真正关注它们。

更多留白/负空间

Nate Hanson

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档