构建界面视觉层级的元素有颜色的显著程度,图片、文字的尺寸大小,还有最基础的,内容的组织结构。

结构设计是指对界面内容进行分组,对界面中的信息、数据进行设计使之结构化呈现的过程。

好的结构设计能使界面信息传达更加清晰、快捷。那么,如果进行结构设计呢?

结构设计———内容的分组

使用线、框、背景色来分组

这是最常见的分组方式,在UI设计中历史悠久。

使用线来分组

查看更多

Web导航设计二三事

导航在Web中扮演一个回答用户“我是谁?”“我从哪里来?”“我到哪里去”的角色。好的导航是一个网站的主要基石。而在开始设计一个网站或者改版一个网页时,它往往是设计师第一个面临的挑战。

01  导航设计之信息架构

       信息架构决定了导航的定性,在设计之前整理清楚内容的信息架构,才能最大程度发挥导航的梳理网站结构、有效传递信息功能。网页结构一共有多少层级关系?是否存在上下层关系?各类别标签之间的关系是并列关系还是相关联的?各子级项中是否存在可合并项?等等。要避免单纯地按照简单的逻辑关系,甚至按照业务关系把页面导航细分到3级甚至4级或者产生出一些和用户认知不相符的信息类别。每增加一级导航就增加一个认知维度,每增加一级使得整个导航系统复杂度增加数倍,不仅用户的操作将成倍的增加,给网页后期维护的带来极大的成本。以下两种图示,就能清楚地看到相同数量页面的不同放置方式给用户带来不同的体验。

查看更多

BlogBanner
文字,这种与人类历史几乎同步的信息表达形式,同样也是视觉传达设计中最重要、最基础的元素之一。她的历史沿革应该已经有非常多的同学做过分享介绍,这里就不再赘述。我想讲述的是字体在网页设计中的运用,她最为常见的一种承载形式:banner字体设计,这几乎是每个Web设计师都会遇到的设计内容,不论是通栏、半通栏,还是各种大大小小尺寸以及活动营销推广的页面头部,都可以看到字体设计的身影。

阿里巴巴中国站首页改版后对于页面内的banner推荐位有了更高的要求,这也引发了我对如何做好一条banner的思考,我觉得在banner设计中相对图形及背景元素的运用,文字本身的设计与排版要重要很多,即使在没有任何背景元素的情况下,文字依然可以良好的传达信息,因此如果我们对banner上的文字进行巧妙设计不仅能鲜明的表达设计主题还能够增强用户关注度从而获得高的点击率,更可以提升网站页面审美价值,也只有理清的这样的思路才能更好的制订设计规范,保证页面广告投放质量的一致性。

下面根据我的理解大概的罗列了几种平时最常见banner字体设计表现形式(视觉大牛们请轻拍):

查看更多