美文网首页每天一品我说设计iDesign
善用UI设计的四个基础原则

善用UI设计的四个基础原则

作者: 脚下日月 | 来源:发表于2015-07-18 11:50 被阅读608次

    开头推荐一本书《写给大家看的设计书》,这是入门级书籍,里面的四个简单原则可以立马用上,分分秒提升UI设计的level.
    这四个原则分别是:亲密性、对齐、重复、对比。接下来我会从生活中找寻一些案例,并选择其中的一个案例的进行改善,以此过程分享如何简单的运用这四个原则来发现生活中的UI设计不合理之处以及如何使用这四个原则来改善产品。

    海报.jpg

    这张海报的元素很多,四个原则全都犯了,以致内容上主次不分明,内容混乱,观者需要看很久才能找到其中的信息。

    pmcaff.png

    这是pmcaff论坛的右侧内容导航,一眼看过去,内容非常混乱,也犯了相似的错误。
    生活中有很多这种设计上的问题,我接下来开始以第2个案例的改善过程来展示整个方法。
    Step1:亲密性原则,对内容进行分类

    对内容分类、分组
    从肉眼可以很直观的看出展示的内容主要由项目类别和内容类别构成:【最新热帖】和【正文标题、简介】是不一样的类别。

    Step2:对齐原则

    左对齐

    使用一条不存在的虚线左对齐,以保证整个页面的整齐。
    Step3:重复原则

    在这里,我对项目标题、标题设计、卡片化的设计进行了重复。

    Step4:对比原则

    在字体上:【最新热帖】【文章标题】【文章简介】,字体的颜色和大小都不一样,形成对比。

    Step5:对视觉效果进行润色

    最终效果
    只是简单的根据四个原则对原有页面进行了改善,就能够看到明显不同的效果。卡片化的效果,让用户的视觉更集中,也能够很清晰的传达要表达的内容、经过这样的修改,整个页面的变得更简洁有层次,可读性大大增强。

    近期我想要找寻一些想共同提升自己产品、商业等各方面能力的同行,通过简单的方式在线上进行分享,大约以每个月一次的周期进行线下的主题活动。
    详细方案7.18晚12点发,届时在公众号当中回复“我要”即可看到。


    这里只求真,没有真理。
    微信公众号:PM范儿
    期待分享和交流~


    相关文章

      网友评论

        本文标题:善用UI设计的四个基础原则

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