(o゜▽゜)o☆
2 用户界面
2.1 图形:直角+扁平。
不论是原版还是 Gandi 编辑器,画直角的图形永远是最简单的。极地湾的UI设计即全直角化,简洁而高效(不论是制作上还是使用上)。
1、画一个正方形很简单吧
2、按住Alt键再拉动小圆点可以对称变形图形(实用技巧+1)
3、放字上去
↑这就是个对话框↑
2.2 文字:字号+间距+排列
文字排版是影响视觉观感的关键要素。好的排版可让用户轻松阅读大段文字。
那么,如何利用排版,让大段文字显得井井有条呢?
2.2.1 字号。
把重点(标题、编号)放大↗↗↗ 把内容(正文)收紧↙↙↙
一致的字号
上帝赋予了人类不同的字号
2.2.2 间距。
控制合理的间距会让画面显得高级,同时便于阅读。
留意行间距,避免造成文字堆积;
保持页边距(即内容到舞台边缘的距离),让画面大气从容;
控制板块间距(即文字段落/图片之间的距离),让布局分明易读。
【一开始的样子】还能读?要展开详细介绍的话就不一定了
【行间距 ON】好些了吧?(注意:一段文本里的行间距要一致)
【页边距 ON】高级起来了?(可适当缩小内容留出页边距~)
【板块边距 ON】文字排版基础完全体!
除了以上所讲的简单排版之外,根据需要压缩(精炼)文段内容也是很有用的技能。能否应用高效精简这个技能就看诸位的语文水平了((((
2.2.3 排列。
应用类文字需要排列整齐。这可以让页面显得工整。
【×】行首不对齐
【×】段首不对齐
2.3 图画排版:间距+平衡
图画排版还是很简单的。主要让版面看起来和谐就好。同时,这个“图画”所指的也不一定是图画,还可以是其他装饰元素。
平衡/重心
平衡:比方说,要在右下角添加装饰元素,那么左上角就应该有合适的(如:相似大小、相似设计)的元素与之呼应。同时注意间距问题。
右下、左上对角平衡
重心:让画面看起来稳定。这也不失为一种好方法,特别是在展示需要认真阅读的内容时。
重心在下
今日技巧堆 ( •̀ ω •́ )✧
UI窗口:直角矩形。
文字排版:字号有致,标题可适当放大、加粗,正文字号保持一致;
间距到位,保有合适的行间距(一般间距比字高矮一点点就好),留出页边距、板块间距,不要让东西堆积在一起;
排列整齐,一定、一定要对齐文字。
如果能给字体加粗,那就更好了。(小技巧:可以通过其他矢量软件编辑完,字体转轮廓后导入回 Scratch 实现)(进阶技巧,按需学习取用!)
画面平衡:画面中心与元素中心构成一条直线,直线上元素应平衡而互相呼应;
画面重心:使重心稳定在某处,适用于文本需要认真阅读时。
最重要、最重要的:以上设计的最终目标是『看着舒服』,只要达到这个目的的,就是好的设计!
阅毕、开工!
<iframe
width="100%"
height="800px"
scrolling="no"
src="https://www.ccw.site/embed?id=today-polarbays-art-tutorial/awa-liny/Lec02"
title="{极地湾基本艺术设计 02}"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
scrolling="0"
></iframe>