看了很多关于UI设计版式技巧仍排不好版?懂得很多套路仍做不好UI设计?其实也正常,因为大部分技巧都比较笼统,每个人用起来也会有不同的效果,所以合肥学码思小编特地总结了7个比较具体的小技巧,算是属于一学就会且很容易出效果的排版小妙招,希望能帮你解决一些比较具体的问题。

  1、文叠文

  该技巧操作起来很简单,就是在标题或内文下面,增加相关的英文单词或阿拉伯数字就可以了。不过在处理下面的文字时要注意:

  颜色要比上面的文字淡,以免影响其识别性;

  字体要用粗体,且字号要比上面的文字大;

  要与上面的文字错位排版。

  之所以这么处理是为了增加版面的层次、对比,以及丰富元素。

  2、给标题增加小色块

  这是增强标题设计感的另一种处理方式,单纯的文字标题难免显得单调,我们可以通过增加辅助元素使它变得更丰富一点,比如在文字的基础上加小色块。

  色块的高度要大于笔画厚度,小于文字的高度,加上去的方式可以是叠加于文字之上,或是置于文字底部,创造出文字的一部分在色块内一部分在色块外的对比效果。还有,色块的颜色来源于版面中的其他元素。

  3、用斜线或点填充空白

  在做设计的时候常常会遇到这两种情况,一是版面中会多出一些影响版面平衡的空白,但已经没有合适的内容可以填充了,如果硬塞一些装饰文字或者图案,很可能会弄巧成拙;二是有的区域小元素小信息比较多、比较散。怎么办呢?

  这两种情况都可以通过该方法解决。把斜线或点重复排列成一个矩形,然后把它填充在空白处就可以平衡版面,且不会造成突兀的感觉。

  要点:线条不宜太粗,点也不宜太大,而且此方法只适合填补小空白,不适合填补大面积的空白。

  在比较散的元素下方排一组斜线,可以把各个分散的元素联系起来,使其成为一个整体。

  4、把背景分成两个斜切的色块

  背景能很大程度地影响版面的设计感,这一点应该都有体会,常规的处理方式是把背景作为一整个色块,而如果把背景分割成两个几何色块时,设计感立马就会增加不少。

  分割的方式好比用一把刀在背景的黄金分割处,划一条倾斜的直线贯穿版面,使整个背景一分为二,而这两个色块的颜色对比要比较强烈。另外,在横版中用左右分割,竖版中用上下分割效果会比较好。

  5、给图片加圆形色块

  增加对比关系是加强设计感的有效技巧,我们也可以用此方式来优化图片。如果版面中的配图是没有背景的产品或人物,那么在这些图片上加一个圆形的色块,创造出虚与实的对比,通常也能得到不错的效果。

  要点:

  色块可以置于图片底部,也可以采用正片叠底压在图片上方;

  圆形色块的边长至少要超出图片宽或高;

  图片与色块要错位排列。

  6、给每行文字都加一个色块

  该手法在画册和海报设计中比较多见,与直接在一段文字下方加一个大色块不同,而是要根据每行文字不同长度,单独加一个相应长短的色块,所以这些文字每一行的长短是不一样的。

  这种处理方式可以使整段文字看起来更整体,增加文字视觉冲击力,而且还能使文字与背景区隔开,加强文字的识别性。

  要点:

  段落文字行数太多或太少效果都不会很好,3-10行左右为好。

  各个小色块可以相互连起来,也可以相互隔开,以实际效果为准。

  7、用飘带装饰包装上的文字

  如果你看过的食品包装够多,你应该能发现,很多包装上的产品名称、广告语或者卖点等信息,都会摆放在一条飘带上。这么处理的效果通常不错,因为飘带具有礼品、赠送的寓意,用在哪里都不会太唐突,而且飘带的形式简单、有细节、变化丰富,很适合用作装饰元素。

  还有一点也很重要,飘带的形式一般都是柔软的曲线,这与版面中其他直线元素可以形成鲜明的对比,加强版面的灵活性。

转载于:https://blog.51cto.com/14296616/2386046

快速提升UI设计感的7个版式小妙招相关推荐

  1. avws扫描出来的漏洞怎么利用_如何用Acunetix网站漏洞扫描软件快速进行扫描?告诉您几个小妙招!...

    扫描网站和网站应用需要花费很长时间.影响扫描速度的因素有: 1.网页服务器性能和响应时间 2.网站大小 3.后台数据库速度 4.扫描软件同时扫描的网站数量 5.漏洞检测的数量 6.Acunetix服务 ...

  2. 怎样提高深度睡眠时间,五个助眠小妙招帮助你快速入睡

    大家知道如何改善晚上睡不着或者睡着了睡眠质量不高的状况吗?相信很多人在遇到这种情况的时候只能听天由命,随它去吧.短期的睡眠不好是可以尽快改善的,我们可以改善自己的生活作息,保持一个良好的睡前习惯,在睡 ...

  3. android 手机充电慢,华为手机充电慢怎么办?6个小妙招让手机快速充满电

    有些小伙伴反馈说自己的手机充电慢.充不进电,小编这就为你支招. 华为手机充电慢怎么办?6个小妙招让手机快速充满电 1.关机充电.在开机情况下充电,手机一边耗电一边充电,导致充电变慢.若希望充电速度更快 ...

  4. 去除面部黑色素小妙招_如何去脸上色素斑小妙招?教你快速祛除色斑沉着的方法...

    如何去脸上色素斑小妙招?快速祛除色斑沉着的方法?爱美之心人皆有之,白皙干净的脸蛋想必是每个爱美的女性都梦寐以求的.可是岁月如箭,飞逝如梭,女多女性朋友还来不及享受青春的大好时光,慢慢就已经步入中年.随 ...

  5. 提升UI设计界面高级感的小技巧

    在UI设计中,界面排版同样很重要,将有效的信息传递给用户这才是用户界面的功能,下面小千就给大家介绍五个能够提升你的设计高级感的小技巧,学到就是赚到! 1.强化层次结构来提升UI的清晰度 将必要的文本内 ...

  6. 优秀案例快速提升UI设计界面的视觉效果、用户体验

    在进行 UI 设计的时候,很多优秀的设计模板能够恰到好处地提升界面的设计视觉效果.用户体验. 在创建漂亮而高效的 UI 的时候,你需要花费不少的时间来打磨细节,并且在此过程中进行不断的调整,让你的客户 ...

  7. pandas fillna_【Python基础】快速提升效率的6个pandas使用小技巧

    文章来源:towardsdatascience 作者:B.Chen 翻译\编辑:Python大数据分析 pandas是python中常用的数据分析库,出现频率非常高,而且pandas功能之多让人咋舌, ...

  8. 【Python基础】快速提升效率的6个pandas使用小技巧

    文章来源:towardsdatascience 作者:B.Chen  翻译\编辑:Python大数据分析 pandas是python中常用的数据分析库,出现频率非常高,而且pandas功能之多让人咋舌 ...

  9. 解决不了bug先放着,这里有40条提升编程技能小妙招

    选自Medium 作者:Kesk 机器之心编译 参与:魔王 这 40 个小贴士,或许可以帮你提升编程技能. 如何提高编程技能?恐怕很多开发者思考过这个问题.最近,拥有将近 15 年开发经验的软件工程师 ...

最新文章

  1. 岗位提成系数怎么算_2019年春节长假坚守岗位,你的加班工资怎么算?
  2. CVPR2015:An Improved Deep Learning Architecture for Person Re-Identificaton
  3. 学习笔记:The Log(我所读过的最好的一篇分布式技术文章
  4. Which one is faster: Java heap or native memory?
  5. Jenkins的maven工程打包的时候怎么指定不同环境的配置文件
  6. python调试器入门教程_PyCharm入门第一步(二)——调试第一个Python应用|python基础教程|python入门|python教程...
  7. ai推理_人工智能推理能力问答
  8. CentOS 7 利用Docker搭建禅道系统
  9. 【渝粤教育】国家开放大学2018年春季 8665-21T护理伦理学 参考试题
  10. [C#]C#补习——控制流语句相关
  11. javascript 字符串与数组之间的相互转换(join、split)与splice介绍
  12. 测试晶面间距软件_i-TEM软件测量TEM高分辨像晶面间距.PDF
  13. 研发人员分层及其工作内容划分
  14. 机器学习-入门杂谈(转载)
  15. 金融学python应该学哪些知识_哪些Python基础知识必学
  16. 高考英语50分学计算机,高三英语50分到100分学习窍门
  17. SpringCloud入门总结 + 使用SpringCloud搭建微服务项目
  18. ttl低电平接大电阻_电路中上拉、下拉电阻的作用及原理
  19. android 自动打开wifi热点
  20. 一览生信分析的各种工作环境—Linux子系统、双系统、虚拟机和Docker

热门文章

  1. STL之hashtable源代码剖析
  2. java 表现层:jsp、freemarker、velocity
  3. UIMenuController的简单使用
  4. 艾伟_转载:深入研究 Repeater
  5. 从ASP.NET得到Microsoft Word文档
  6. MS SQL Server查询优化方法
  7. [从0到1编写服务器]准备知识
  8. phpMyAdmin的配置
  9. 2018年机器视觉前景预测
  10. PropertyGrid自定义控件