提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
UI设计新手要注意的设计法则:
法则1:UI设计光影关系
法则2:黑白优先原则
今天给大家分享的是
法则3:增加空白空间
为了让UI看起来更加有设计感,留出一些空白的空间。
在第 2 条法则中,我们说到了黑白优先的原则,让设计师在考虑颜色之前先想想空间和布局,那么现在我们就来说说如何安排空间和布局。
HTML 的默认版式是这样的:
所有东西都堆在屏幕上,字号、行距都很小,段与段之间有一些间隔,但是也不是很大。这么布局实在是太难看了。如果你想设计出精美的UI,那就需要留出更多空白的空间。
留白空间、HTML 和 CSS
如果你和我以前一样,习惯用 CSS 来调整布局,那你最好改掉这个坏习惯,因为 CSS 默认是没有留出空间的。试着把空白当作默认状态,在空白页面添加各种元素。从没有修饰过的 HTML 开始,先做好内容,然后再做排版。
下图是 Piotr Kwiatkowski 设计的一个音乐播放器。
请注意左侧的菜单栏。字号是 12px,行间距有文字的两倍高。再看看列表的名称,“PLAYLISTS”和下划线之间有 15px 的空白,播放列表名称之间还有 25px 的间距。
在顶部导航栏也有很大的空间,搜索图标和“Search all music”占到了导航栏高度的 20%。
留白的空间收到了良好的效果,不同的元素有机的组合在一起,使得这个页面成为最好的音乐播放器 UI 之一。
大量的空白可以把混乱的界面做得简洁美观,比如这个论坛:
或者维基百科:
很多人认为在维基百科的这个新页面上,很多功能找不到了,但是你不能否认这是学习页面设计的一个好案例。
在行之间留出空间。
在各个元素之间留出空间。
在各组元素之间留出空间。
分析一下哪些是可行的。
今天开放10个UI设计VIP课程试听名额。
想体验学习的亲添加微信:hl9700712,
备注:学UI
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册