实例分享在界面排版中需要注意的七大原则.docx
- 文档编号:10871270
- 上传时间:2023-02-23
- 格式:DOCX
- 页数:8
- 大小:79.01KB
实例分享在界面排版中需要注意的七大原则.docx
《实例分享在界面排版中需要注意的七大原则.docx》由会员分享,可在线阅读,更多相关《实例分享在界面排版中需要注意的七大原则.docx(8页珍藏版)》请在冰豆网上搜索。
实例分享在界面排版中需要注意的七大原则
实例分享|在界面排版中,需要注意的七大原则(下)
在上篇《实例分享|在界面排版中,需要注意的七大原则(上)》大家了解了界面排版的前四个原则,今天接着将后面三个原则也分享出来。
我们来先来回顾一下大纲:
一、亲密原则
二、对比原则
三、平衡原则
四、相似原则
五、简洁原则
六、封闭原则
七、情感原则今天我们从第五条开始讲述
五、简洁原则
5.1数字简洁
很多同学有个不好的习惯,就是执行过程中不爱看图层的位置和大小,尤其是位置,如果你的软件没有选择像素自动对齐,这样的坏毛病会导致位置的数值经常出现小数点或者奇数,从而使整个界面元素的间距、位置都不够规范,如下图:
如果你的文件图层有很多像左图这样繁琐的数值,那就抓紧时间规范好自己的作图习惯吧!
5.2规则简洁如果你有平面设计的经验,你会很清楚,一张平面设计的字体种类不宜太多、对齐方式不宜太多⋯..因为规则太过
繁琐会让你的设计变得复杂,甚至臃肿不堪。
而界面设计师也是一样的,能用一个规则解决的问题,
就尽量不要使用两个,如下图:
列表信息上下边距(绿色和蓝色的高度)就可以使用一个规则,如果你非要定为不同的距离,就会增加设计甚至开发的复杂性,从而造成不必要的资源浪费。
再举个例子:
看上图,上一期已经讲述过了,由于亲密原则,我们知道上下间距(绿色高度)一定大于内容区间距(紫色高度)但是为了规则的简洁,内容区的所有间隔(紫色高度)可以采用同一个规则,而上下间距(绿色高度)也可以相同,这样五个距离,我们仅仅只用了两个规则就解决了问题,并且不失美感。
(当然如果内容区内容需要明显区分,你也可以采用不同间距)
5.3样式简洁
今年有一个流行趋势是“无线化分隔”。
将分隔线去掉,这就一种样式上的简洁,如下图:
国际版QQ概念稿、今日头条的评论页面都采取了这种简洁的分隔样式,这样的排版方法使整个页面看着轻量、干净、大气,更加突出内容,甚至能够增加用户的欣赏时间。
再比如下图:
我们可以很容易看出左图是比较旧版的样式,一个简单的输入框由多少种元素组成?
有背景图、透明蒙版、白色矩形框和描边。
而右图是目前比较流行的简洁样式,一条线就解决了输入框这个功能问题,并且美观大气。
六、封闭原则
什么是封闭原则呢?
我们还是先来看图片:
上面这张图,虽然已经用间距分开两个部分的内容,但还是不够清晰,这时候我们就可以使用封闭原则将二者区分开,如下图:
将两个部分的内容用线框封闭起来后,就可以更容易的
区分二者了
而在我们的移动端界面排版时,最常使用的封闭表现形
式就是“卡片”,用来区分各部分独立的信息,如下图:
1比一
soSJraz
r⑥
KSK書E■転
HQ
In娶Qis謄
第H
嘯宝e
曲卿3
o§so_.l^s£»
§
upAsi
旨Aiv^Hfr**
上面这张列表,由于间隔和颜色的原因,导致我们更倾向于纵向阅读,这时候我们也可以使用封闭原则,将内容封闭起来(每隔一条信息使用深色背景),如下图:
这样,不仅可以让我们倾向于横向阅读,而且可以更好的区分开每条独立的信息内容。
七、情感原则
如何评价一个设计稿的好坏?
我觉得首先需要判断传递出来的情感是否正确,因为情感是前期的一个方向与基调,如果这个基调有误,及时你设计的再怎么漂亮,也都是徒劳。
比如我想做一个空数据页面,那就需要传递出一种失
望、伤心的情绪,而如果你给我一张下面这样的图:
即使你的人物形象再怎么生动,色彩再怎么舒服,最后的分数也都是不及格,就像我们上学时的语文作文一样,一旦你跑题了,什么都别说了,差评!
如何能传递出引起用户共鸣的情感呢?
答案当然是换位思考,站在用户的角度思考他们想要什么!
比如,用户在网购,加载动画是一位小哥在奔跑着送快
递,如下图:
我觉得用户都没有办法不喜欢!
再比如,当你在一款健身app坚持锻炼了很久后,突然
软件给你一个这样的反馈,如下图:
你是不是很有成就感呢?
甚至想发个朋友圈炫耀一下
吧!
当然,界面的调性、品牌感、配色等等,这些都是影响情感的因素,也都是我们在动手之前需要考虑的内容,只有将这些因素考虑清楚后,才能保证让你的设计方向正确,情感传递精准。
总结
作为设计师,我们的根本职责还是解决工作上的问题,在实际工作中经常遇到设计原则与其他方面的因素有冲突、或者某两个设计原则互相矛盾的情况,这时候就需要我们去合理的处理矛盾,让工作顺利的进展下去。
遵循原则是好事,但是如果被规则限制死那就不是什么好事了,特殊场景需要特殊处理,不要过度的陷入规则之中而让自己失去创新的能力,设计原则并不是一成不变的,在我们前行的路上,你也可以多总结,多积累,最后沉淀出属于你自己的一份设计原则!
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 实例 分享 界面 排版 需要 注意 七大 原则