• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 自学体系第二课!写给新人设计师的界面排版原则(下)

自学体系第二课!写给新人设计师的界面排版原则(下)

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含UI,ui设计,排版布局,排版设计,经验分享等相关知识,希望在学习及工作中可以帮助到您

head-first-ui-typesetting-2-1

上一期大家了解了界面排版的前四个原则,今天接着上一期的内容将后面三个原则也分享出来。

欢迎关注作者的微信公众号:「菜心设计铺」

我们来先来回顾一下大纲:

一、亲密原则

二、对比原则

三、平衡原则

四、相似原则

五、简洁原则

六、封闭原则

七、情感原则

回顾前四条原则请戳这里:写给新人设计师的界面排版原则(上)

今天我们从第五条开始讲述。

五、简洁原则

5.1 数字简洁

很多同学有个不好的习惯,就是执行过程中不爱看图层的位置和大小,尤其是位置,如果你的软件没有选择像素自动对齐,这样的坏毛病会导致位置的数值经常出现小数点或者奇数,从而使整个界面元素的间距、位置都不够规范,如下图:

-composing-20170211-1

如果你的文件图层有很多像左图这样繁琐的数值,那就抓紧时间规范好自己的作图习惯吧!

5.2 规则简洁

如果你有平面设计的经验,你会很清楚,一张平面设计的字体种类不宜太多、对齐方式不宜太多…..因为规则太过繁琐会让你的设计变得复杂,甚至臃肿不堪。

而界面设计师也是一样的,能用一个规则解决的问题,就尽量不要使用两个,如下图:

-composing-20170211-2

列表信息上下边距(绿色和蓝色的高度)就可以使用一个规则,如果你非要定为不同的距离,就会增加设计甚至开发的复杂性,从而造成不必要的资源浪费。

再举个例子

-composing-20170211-3

看上图,上一期已经讲述过了,由于亲密原则,我们知道上下间距(绿色高度)一定大于内容区间距(紫色高度),但是为了规则的简洁,内容区的所有间隔(紫色高度)可以采用同一个规则,而上下间距(绿色高度)也可以相同,这样五个距离,我们仅仅只用了两个规则就解决了问题,并且不失美感。(当然如果内容区内容需要明显区分,你也可以采用不同间距)

5.3 样式简洁

今年有一个流行趋势是“无线化分隔”。将分隔线去掉,这就一种样式上的简洁,如下图:

-composing-20170211-4

国际版QQ概念稿、今日头条的评论页面都采取了这种简洁的分隔样式,这样的排版方法使整个页面看着轻量、干净、大气,更加突出内容,甚至能够增加用户的欣赏时间。

再比如下图

-composing-20170211-5

我们可以很容易看出左图是比较旧版的样式,一个简单的输入框由多少种元素组成?有背景图、透明蒙版、白色矩形框和描边。而右图是目前比较流行的简洁样式,一条线就解决了输入框这个功能问题,并且美观大气。

六、封闭原则

什么是封闭原则呢?

我们还是先来看图片:

-composing-20170211-6

上面这张图,虽然已经用间距分开两个部分的内容,但还是不够清晰,这时候我们就可以使用封闭原则将二者区分开,如下图:

-composing-20170211-7

将两个部分的内容用线框封闭起来后,就可以更容易的区分二者了。

而在我们的移动端界面排版时,最常使用的封闭表现形式就是“卡片”,用来区分各部分独立的信息,如下图:

-composing-20170211-8

还有

-composing-20170211-9

上面这张列表,由于间隔和颜色的原因,导致我们更倾向于纵向阅读,这时候我们也可以使用封闭原则,将内容封闭起来(每隔一条信息使用深色背景),如下图

-composing-20170211-10

这样,不仅可以让我们倾向于横向阅读,而且可以更好的区分开每条独立的信息内容。

七、情感原则

如何评价一个设计稿的好坏?我觉得首先需要判断传递出来的情感是否正确,因为情感是前期的一个方向与基调,如果这个基调有误,及时你设计的再怎么漂亮,也都是徒劳。

比如我想做一个空数据页面,那就需要传递出一种失望、伤心的情绪,而如果你给我一张下面这样的图:

-composing-20170211-11

即使你的人物形象再怎么生动,色彩再怎么舒服,最后的分数也都是不及格,就像我们上学时的语文作文一样,一旦你跑题了,什么都别说了,差评!

如何能传递出引起用户共鸣的情感呢?答案当然是换位思考,站在用户的角度思考他们想要什么!

比如,用户在网购,加载动画是一位小哥在奔跑着送快递,如下图:

-composing-20170211-12

我觉得用户都没有办法不喜欢!

再比如,当你在一款健身app坚持锻炼了很久后,突然软件给你一个这样的反馈,如下图:

-composing-20170211-13

你是不是很有成就感呢?甚至想发个朋友圈炫耀一下吧!

当然,界面的调性、品牌感、配色等等,这些都是影响情感的因素,也都是我们在动手之前需要考虑的内容,只有将这些因素考虑清楚后,才能保证让你的设计方向正确,情感传递精准。

总结

作为设计师,我们的根本职责还是解决工作上的问题,在实际工作中经常遇到设计原则与其他方面的因素有冲突、或者某两个设计原则互相矛盾的情况,这时候就需要我们去合理的处理矛盾,让工作顺利的进展下去。

遵循原则是好事,但是如果被规则限制死那就不是什么好事了,特殊场景需要特殊处理,不要过度的陷入规则之中而让自己失去创新的能力,设计原则并不是一成不变的,在我们前行的路上,你也可以多总结,多积累,最后沉淀出属于你自己的一份设计原则!

欢迎关注作者的微信公众号:「菜心设计铺」

cxsjpqr

「想掌握排版四原则?3个海报设计教程满足你!」

  1. 《设计易容术!如何设计一张高品位高水准的海报?》
  2. 《设计易容术!如何设计一张高品位高水准的海报(二)》
  3. 《设计易容术!如何设计一张高品位高水准的海报?(三)》

优设大课堂

您可能想查找下面的文章:

  • 2013年网页设计UI最热趋势 最流行的UI设计
  • 我们在囧途之UI工程师职业感慨
  • 对于图片社交网站UI应用的对比分析(图)
  • 通往优秀UI(用户界面)设计师之路的20个路标
  • 我们能从Google的全新UI中学到的知识(图文)
  • 10个优秀的 Web UI库/框架
  • 这10条认知,可能就是你和大厂UI 设计师的差距
  • 针对零基础新人,我给出这份可能是最详细的UI 自学流程总结
  • 写给新手的APP结构指南:首页相关(下)
  • 想为iPhone X设计UI?给你这11个设计小贴士

相关文章

  • 2018-08-23学会插画的这四种玩法,能让你的UI体验更优异
  • 2018-08-23交互设计中的“无意识错误”:如何帮助用户防错?
  • 2017-08-06做网站用UTF-8编码还是GB2312编码?
  • 2017-08-06禁用IE10的密码明文显示和快速清除功能的方法
  • 2018-08-23文案启蒙:感动是个好东西,我们都要保护它
  • 2018-08-23免费高效!用 Paddy 让你的 Sketch 学会自动排版!
  • 2017-08-06css浮动(float,clear)通俗讲解经验分享
  • 2018-08-23腾讯专业干货!Web图像的常见应用策略与技巧
  • 2018-08-23UX设计在5年内将在哪里?这里有5项预测!
  • 2017-08-06入门知识 网站地址前的http是什么意思?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 超全面!降低用户成本的产品设计方法总结
    • 空路径对页面性能影响的解决方案
    • 打包下载!23款网页设计师必备经典私藏英文字体
    • 网易设计师:超全面的交互规范设计流程
    • 进阶好文!让人舒服的的交互设计稿该有的5个特点
    • 如何写出拥有“带货”能力的产品文案?
    • 把网页变成黑白(兼容谷歌、火狐、ie等浏览器)
    • 「这个控件叫什么」系列之小红点+索引导航+分段控件
    • 明明想法和思路都对了,为什么最后效果却不尽人意呢?
    • 这些悬浮动效的常见玩法你都知道吗?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有