美文网首页设计沉思录
UI中的平面设计原则

UI中的平面设计原则

作者: Rab | 来源:发表于2017-03-20 18:02 被阅读77次

    很多设计师在大学时期都是学习绘画,动画,或者视觉传达类的学科,大学里一般也没有UI的专门学科。因为人机界面交互,用户体验,都是非常综合的领域,需要方方面面的知识。

    我以前做游戏时,UI更多是凭借视觉感觉。现在做互联网产品时,UI更像是一种接近工业的学科。它不是一张海报,一张原画,或者是动画短片,强烈的艺术风格可以说明一切。UI在互联网十几年的发展下,从电脑软件界面,到手机移动界面,已经形成了标准化视觉。用户已经习惯,设计师不必造轮子。抛开交互,在阅读体验上,比如,信息的排版,网格系统,都需要向已经发展的很成熟的平面设计学习。

    搜一搜UI,就像工厂里的零件,这些基本的零件本身的质量早已经有了行业标准,通过各种官方规范文档就可以了解。

    这些零件该如何组装起来,让它可以舒服的被人使用;以及如何打造出可以给人留下印象的东西。这是设计师需要主要思考的地方。

    无论是在什么客户端上,无论是什么类型的UI,平面设计中基本的,通用的准则,是每个设计师都需要具备的知识。

    UI设计 首先要保证信息的清晰呈现,让信息易读,让操作易用。
    其次才是在信息清晰呈现的基础上,加入视觉设计,增加表现力。让UI提现产品的气质,风格或者文化。

    这个主次关系不可以颠倒。


    同时,如果你看过一些设计书,就会知道在平面设计领域的四大原则:

    • 亲密性
    • 对齐
    • 重复
    • 对比

    简要说明下这四个原则:

    亲密性

    彼此相关的项应当靠近,归组在一起,组成视觉单元
    有助于组织信息,减少混乱,为阅读者呈现清晰的结构

    对齐

    任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。
    能从排版中看到虚拟的“线”和“边框”

    对齐 表格的对齐原则

    重复

    视觉要素重复出现,可以重复颜色,形状,材质,空间关系,线宽,字体,大小和图片等等。
    增加条理性和统一性。

    重复代表是经过思考的重复

    对比

    对比的基本思想是,要避免页面上的元素太过相似。如果元素不相同,那就让他们截然不同。
    在需要引人注目的地方,一定要加强对比。

    字号的对比 色相对比 如互补色对比

    同样也可使用邻近色,和对比色对比,同一颜色的明度和纯度对比。不多加赘述。

    排版中的实例

    在实际排版中,尤其是文字的排版,有一个很重要的概念就是注意行高。

    在前端开发中,文字都有默认的行高数值。在使用PS等设计工具时,设计师容易忽略这个数值的变化, 当文字字号变大时,其行高也要相应的变化。(PS默认的行高多为「自动」,距离较小。当文本内容较多时,需要手动将行高调整到字号的1.5~2倍)

    行高与行间距

    如下图,当我们拿到最左边这样的文本内容后,虽然它已经给标题加粗处理了,但是仍然不易阅读,所以我们需要按照亲密性原则,讲文本内容分组,调大它们之间的距离。

    同时,将加大标题字号,加强对比。(此时比较重要的是,当文字字号变大时,文字行高也变大了,所以我们要相应的加大它的行间距) 这样就是一个相对舒适的排版了。
    也可以考虑增加一些缩进来加强从属关系。

    文字排版中的间距

    另一组实例

    以下是一个抽奖转盘的活动规则页面。

    某活动规则页面案例
    • 首先这种长文本一般不适用于第二张图的居中,阅读视线会非常忙乱。
    • 第三张图是公司的实习生交给我的成品,当时看了强迫症就要犯。文字没有分组,同时各种不对齐,(另外乱打AAABBB是很不好的习惯,因为有时候字间距和标点也是要考虑的)
    • 第四张图调整了文字和对齐和行间距,阅读体验好了很多。
    • 第五张图则更加加强了标题的对比,弱化分割线,利用文本的分组和对比来做区分,更好一步。
    文本排布过于松散平均时,可按照亲密性缩小间距,上下留白加大,形成视觉单元 亲密性与视觉单元

    利用移动端8px原则,设置网格

    网格系统有秩序之美,在传统书籍平面中,网格是排版的基础。而在界面设计中,我们可以将网格设置成我们需要的像素单元,实现有规律的对齐。

    8px原理由来
    1.由于IOS技术开发是以320*480px为标准开发的,所以设定此尺寸为1,算出各个尺寸的比例。
    2.各个尺寸比例的值乘以4时,各个尺寸都能够满足是整数,且保证开发时不会模糊。
    3.设计稿尺寸为开发尺寸的2倍,所以我们选择为最小尺寸单位。

    8px基准 利用网格布局

    字号推荐

    相比网页而言,手机屏幕小,信息集中。所以字号不宜过小,而且现在也有流行大字的趋势。很多新闻类APP的内容也已经有杂志化的走向,标题文字都会相应加大。
    还是那句强调,文字加大时,间距一定也要加大。要留足空间。

    再看一组综合实例


    排版细节变化的设计思路
    • 图1乍一眼看没什么毛病,但是仔细看,排版间距略平均,标题无对比,阅读视线无重点。
    • 图2 调整了间距亲密关系,让新闻列表区域作为整体,靠的更近,同时加强了标题文字的颜色对比。
    • 图3 进一步加强文字对比,弱化板块标题,将视线重点留在 “晨报”和新闻标题上。同时将新闻列表间距更加靠近。
    • 图4 为了使界面排版更加简洁,将缩略图边距去掉,并放大图片尺寸,图片所带来的垂直空间,可以帮助标题文本拉出空间,不至于像图3过度拥挤。

    设计中同样可以利用网格。快速完成准确的布局。然后在此基础上再做进一步的需求化,风格化调整。

    在此主要分享了一些最基本的平面设计的小注意点,这些细节看似简单易懂,但是实际设计中很容易被忽略无视,新人设计师更是会信马由缰,全凭感觉。UI设计不是学几个软件,抄几个界面,做几个ICON就可以了。
    仅仅从平面视觉的易读性来讲,需要学习平面设计原理;
    另一个层面,为了易用性,在产品需求,人机交互,用户感官心理方面需要不断研究;
    进一步实现艺术和创意的表现,体现产品的风格,品牌和文化。

    扯两句名言:
    设计是为了解决问题;
    真正的设计并非令人从表象察觉到有何不同,而在于无形中从设计上受益。

    当然,我们不是要被这些规则限死,从而让所有的设计都看起来一样。
    而是在打破规则之前,首先明白规则是什么。

    相关文章

      网友评论

        本文标题:UI中的平面设计原则

        本文链接:https://www.haomeiwen.com/subject/ipfggttx.html