1. 首页 >> 热点

设计规范,界面设计规范

如何正确使用设计规范,设计设计提升界面设计水平?规范规范

在前面的 C 端行业分析说过 ,当前的界面 C 端 APP 界面为了抢夺用户的注意力,设计越做越花哨 ,设计设计运营 、规范规范国潮化的界面风格越来越浓烈。

如何正确使用设计规范�,设计设计提升界面设计水平?规范规范

所以 ,现在的界面作品集项目设计和准备都无可避免的要有所涉猎 。对于初级设计师来讲,设计设计“模仿(致敬)”一两个成熟案例没什么问题,规范规范但要做出一整套 ,界面就驾驭不住了。设计设计

而关键的规范规范问题 ,就出在平面四要素的界面 —— 重复性上 。

一、学员案例分析

“重复”是四要素中最简单的一个原则 ,即在画面中对设计元素、样式、细节进行重复  ,来建立整体观感的统一、和谐。

但越是简单的原则,越是在实际应用中会被忽视,形成对应的问题。所以如果不能掌握重复的应用方式 ,就没办法确保界面样式的统一,自然输出的项目效果就会大打折扣  。

想要解决这个问题 ,我用一个学员的作业为例进行讲解,下面是首页中的三个不同分页 :

如何正确使用设计规范
,提升界面设计水平?

而这次的分析中 ,重点是围绕在重复性的问题上展开  ,所以我不会过多讲解设计本身的好坏和体验的问题 。

问题 1:顶部广告样式不统一

如何正确使用设计规范�,提升界面设计水平?

第一个问题就是顶部广告图样式每个页面都不一样,用了三种样式。虽然不是说样式一定要统一 ,甚至做不同的样式也能增加设计的丰富性 ,但这三个样式明显呈现出不和谐的问题  。

主要的问题是对圆角和转角的处理上,三个广告图的圆角各不相同,同时在缺口异形处理上 ,使用的转角也不一样 。

问题 2 :标题样式各异

如何正确使用设计规范,提升界面设计水平?

第二个问题就是标题的排版和样式上 ,除了顶部分页器标题,下方多数内容模块是有给模块标题的 ,而部分模块没有标题,且标题间的尺寸没有统一。

问题 3:热门片场的样式

如何正确使用设计规范
,提升界面设计水平?

热门片场这个组件的样式独立性过强 ,包含了很多特殊的设计细节 ,比如序号和下方的小字母 。而右侧的两个同级模块又不保留间距 ,直接连接到一起 。

虽然不加间距的做法下方想看模块也有,但是想看的连接是封面和信息卡片  ,是一个模块下的两部分内容 ,而不是热门片场内的并列内容 。

问题 4 :渐变应用过多

如何正确使用设计规范	
,提升界面设计水平	?

页面中用的渐变太多 ,而渐变颜色不同,本身颜色很混乱且缺乏统一性,进一步降低界面的视觉效果。

问题 5:热门城市卡片样式

如何正确使用设计规范,提升界面设计水平	?

热门城市模块如果单看还好,但把它置入到多页面中一起展示就很突兀,因为没有这样的大圆角应用 。

且里面出现的字体在前其它页面也没有应用 ,突然放进来也很违和 。

问题 6 :正文文本字体不统一

如何正确使用设计规范,提升界面设计水平?

除了大的设计样式外,小的设计细节一样不能忽视 ,其中承载信息的文本中,权重基本相同的内容尺寸却不一致,增加了一些没必要的规格 。

除了以上 6 个问题外,还有一些按钮 、图标等小细节的问题就不一一列举。只要知道 ,很多时候整套界面设计好以后 ,凑一起检查觉得看起来不对劲,又找不到问题出在哪里  ,那就是重复性原则的缺失 。

二、优化思路的解析

上面的问题有不少,但在以重复性原则的优化角度来说 ,头疼医头 、脚痛医脚的做法是没用的 ,因为你改完了还可以出现新的问题 ,治标不治本。

而想要解决问题  ,就必须要学会正确建立并使用 —— 设计规范。

设计规范不是用来做文档的摆设,也不是因为页面要做的花就可以忽略掉的阻力,它能实打实得帮助设计师来规范界面的统一性,实践重复原则 。

而在上面的案例中,要建立什么规范呢 ?

根据问题的顺序包含圆角 、间距、字体、颜色四个方向,我们逐一进行解释 :

优化 1:圆角的统一

首先统一圆角的规格 ,提前把圆角规范成 8 和 4 两个数值,然后应用到头部广告 、热门城市以及其它组件模块中去 。

如何正确使用设计规范	,提升界面设计水平?

优化 2:优化间距

将原文连接的模块进行拆分,并统一间距 ,包括模块上下间距 36、左右间距 8 、内间距 12 等。

如何正确使用设计规范,提升界面设计水平?

优化 3  :字体定义

字体的优化上包含两个部分,一个是使用特殊字体的使用,因为这类花哨风格的设计只用默认字体确实是不足的 ,所以要用个性字体就一开始定好用“标小智无界黑” ,且这个字体会用在一些关键的标题 、数字上,而不是像原先只用在热门城市内的标题。

如何正确使用设计规范
	,提升界面设计水平
?

除了特殊字体外,剩下的就是基础文本字体的统一,削减字号和字重数量 ,把它们统一成固定的几个规格。

如何正确使用设计规范,提升界面设计水平�?

优化 4:色彩优化

这个项目的主色其实是橙色…但原设计没有表现,所以要重新明确主色 、中性色。而因为没有做前面的品牌色搭建,没有做合理 、固定的辅助色的话 ,那就不在这里强行规范它 ,给后面的配色更多发挥余地 。

同时 ,在渐变方向 ,要定出符合项目需要的渐变还是有点困难 ,因为当前的界面视觉元素和颜色已经很多了(图片、图标) ,渐变显得很多余,所以最好的方法就是不用、少用……在一定要加的场景在看情况设计。

如何正确使用设计规范,提升界面设计水平?

根据上面定好的规范 ,再移除一些不必要的元素,我们就可以快速输出新的版本 ,下面我们做个前后的对比:

如何正确使用设计规范,提升界面设计水平�?

如何正确使用设计规范	,提升界面设计水平
?

如何正确使用设计规范	,提升界面设计水平?

在不涉及页面、组件大改的情况下,每个页面对比之前的差距其实并不太大,但当把它们合并到一起以后再对比一次  ,是否能感受到不同 ?

原版合集:

如何正确使用设计规范

,提升界面设计水平?

新版合集:

如何正确使用设计规范,提升界面设计水平?

设计规范对于项目设计是非常重要的工具,不是用来输出文档的摆设 ,还是实现复杂设计的阻力。

虽然在真实项目中,很多大厂产品的设计毫无重复原则可言  ,做到哪算哪,前后割裂严重  ,比如  :

如何正确使用设计规范
,提升界面设计水平	
?

如何正确使用设计规范,提升界面设计水平	?

新人可千万不要拿这些东西做参考 ,他们虽然那么做了,但招聘的时候可是另一套标(zui)准(lian) ,所以一定要按更严格的标准来要求自己  。

不要让自己的专业性表现在这种初级的问题上翻车 !

结尾

后面还有一些案例的改版会持续更新 ,有想讨论的问题可以在下方或者社群里留言 !

我们下篇再贱~

作者 :超人的电话亭



版权声明:四位快资讯 ,转载请注明出处:https://www.4we.cn/news/50b22699723.html

 
QQ在线咨询
售前咨询热线
020-123456789
微信号
020-123456789