ui设计入门新手必看:学习UI网页设计你会排版吗

上上次总结了中英文排版的原理,这期要来分享一下我个人总结的排版设计方法,很多文章都是写了作者的归纳和研究,但是对于我们来说,如果不自己去尝试做,是没有什么价值的。所以这次我们讲的是能够让大家快速上手的的排版方法,说白了就是小技巧。但是在说小技巧之前我们需要明白:

1.排版的目的是什么。

2.在企业中哪些地方需要我们用到排版。

目的

作为一个商业设计师,我们首先需要考虑的是我们的产出是否有商业价值,再考虑创意与美观。所以,我们的目的就是更高效的向用户传达信息。好,那么高效传达信息的设计原则就有:突出主内容,让画面层次分明,引导视线点缀还有吸睛的创意与配色 。

哪些地方需要我们用到排版

1.根据公司规模大小可能每个设计师负责的都不一样,据我所知可能需要用到排版的有这些地方:网页、app、ppt、推广h5、物料、海报、vi、效果展示图、印刷等。

————我是分割线————

小技巧一:框和短线的使用

其实框和短线的排版很早前就流行在设计圈,最近站酷上也有人分享了类似这些框或者方形元素的在设计排版中的作用。其实大家看过也就忘了,你真的还记得大神在文章中说了什么吗,并不记得了对吧?并不是说大神说的不好,而是那都只是别人在分析,你在看,看完自然就忘了。如果大伙觉得真的想试试看这个小技巧,那么我们接下去就要开始实战了。

step1:准备一个你喜欢的元素做主题,模特、手机、app页面等等,这里我拿一个我追波做的页面来做例子,先准备了一张app页面。背景要来一个纯色的,那我就先来一个黄一点的,大家可以先用白色做底色。

step2:在 元素边上画一个小框不要太大也不要太小,略微粗一些。然后在框里面打上字,记住字体的粗细主要标题和文字要做明显区分,对齐,最后在内容文字下画一个短线,当然短线,内容你们都可以随意发挥。

step3:扩充画面内容,这时候画面的左边是比较空旷的,那么我们也可以想一些办法来填充一下空白,但记住不要塞太满,留白也很重要。第二步中右边的文字是用来解释页面内容,然后左边的文字和元素可以用来做大标题和修饰,短线,框,小方块等。最后右下角再加上一个署名,大功告成!

下面这张是我用模特元素排的,请轻喷。好了,是不是掌握了一点点小的窍门?

小技巧二:字母覆盖式

先来欣赏一下一些字母覆盖式的排版

step1:依旧是那个味道依旧是那个模特,请把她轻轻放在画板上。

step2:铺上不规则自然错落的英文字母,但是排列要有规则,和内容要有一定的联系,视觉的流引导。之前说了排版首要目的是信息的传达,所以我们不仅仅是铺上字母就可以了,更重要的是信息的传达和引导。

step3:加上适当的小修饰和商业需求。

就像下面这样:大片的即视感有木有

小技巧三:卡片悬浮

先来欣赏一下dribbble上的一些作品(图片来源:UIstar、kihoo等)

tips1:卡片悬浮的排版和上面两种有很大的区别,以上两种更多的是用一种点缀的方式去引导用户发现信息这样的一个目的。而卡片悬浮更多的是辅助主要内容的展示,是主要内容的延伸。

tips2:卡片在整个画面占比的不同,他的作用也是不同的.一般的,卡片需要解释底下内容时,不可大面积使用,内容依然是更为重要以及大面积展示。

tips3:在做app设计,web设计时需要考虑较多需求是否能够使用卡片展示,这里需要考虑开发以及以后的扩展需求。

那么下面依然是那个模特,我们用第三种卡片悬浮将她做成了购买衣服的这样一个app page,是不是一女多用?哈哈

总结

这三个小技巧是用的比较多的,也是上手比较快的。这边教大家方法希望可以多加练习以及举一反三,多思考,多去看看国外的大神的作品以及揣摩他们的设计思路,因为方法是死的,思路是活的。

认真学好小技巧,将来加薪才会吊。

现在有很多小伙伴在自学,但是一个人的能力总是有限的,遇到问题没人帮你解决,我们有一个UI网页设计的学习交流Q群,平时提供大家一起学习网页设计,每天免费网页设计课程知识讲解。有问题相互交流。

想学习UI/UE/美工平面设计/手机图标APP/交互界面PS AI DW网页设计的小伙伴,点击链接加入群【UI设计学习交流群】学习

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,258评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,335评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,225评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,126评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,140评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,098评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,018评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,857评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,298评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,518评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,400评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,993评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,638评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,661评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352

推荐阅读更多精彩内容