大量的视觉设计基础设计出迷你屋商城视觉规范

“所谓设计，指的是把一种计划、规划、设想、问题解决的方法，通过视觉的方式传到出来的活动过程。”
设计是一个有意识的计划、规划信息的活动。从这个角度来说，制定并执行规范过程本身就是设计。

迷你屋商城视觉规范在之前大量的视觉设计基础上加以整理、提炼出6类，共13项基本界面元素。商城中的所有页面都严格的依据视觉规范进行设计。下面简要介绍一下迷你屋商城视觉规范的具体内容：

文字颜色
文字颜色定义了三种，分别是：突出色，正文颜色和辅助色。
突出色是页面上的最抢眼的颜色；正文颜色，无需多解释；注释、说明之类不需要太让用户留意的文字使用辅助色。

一个网站的文字颜色总体上可以按上面这三种划分，当然不一定只有三个文字颜色。单纯的来看文字颜色，并没有太多的问题。但文字颜色与链接样式；文字颜色与页面背景颜色这两个问题就比较复杂了。这些问题将在下面分别讨论。

链接
链接最传统的表现手段是：蓝色+下划线。但是由于这两个表现手段明显的缺陷，多数时候难于应用。
从上面这个最传统的表现还可以演化出很多种链接的表现手段：
1. 链接文字只用蓝色。链接文字默认状态时，只显示为蓝色，鼠标经过时再出现下划线或者反色。Yahoo.com flickr都使用的是这样的方式。这种表现的缺陷：网页上多数文字是有链接的，于是页面上多数文字都是蓝色的了，视觉表现可发挥的空间比较小。
2. 链接文字只加下划线。有下划线的文字是可以点击的，这是足够清楚的表现了。这种表现的缺陷：很多链接的时候，就会是满页都是下划线了。同样是让视觉表现比较痛苦。
3. 列表文字默认不加下划线；分散出现的链接有下划线。Qzone就是应用的这种。缺陷：在一个页面中同时出现这两种情况，和列表中的链接相比，分散出现的链接加了下划线，显得更为强眼，更明确的传达出“可点击”的信息。而分散的链接并不总是要强调的。所以需要再用其他方式补救，必要的时候让列表突出。Gmail中有比较不错的方式。

链接的表现方式也许还有更多，但无论是什么样的表现，都需要确保一个基本原则：操作前操作可识别，即，直接浏览页面就可以知道哪些文字是可以点击的。

迷你屋商城页面中主要是图片的展示，文字相对较少，很少在一页中大量出现链接，因此采用了第二种方式：链接文字只加下划线。

第二种表现方式链接的表现并不涉及颜色，任何颜色的文字都可以加链接。之前我们也规定好了不同类型的文字使用的颜色。这样的组合规范自由度较大。文字的颜色取决于它的重要程度。非常重要的用紫红色，非常次要的用灰色(辅助色)。有链接则加下划线。不存在“链接文字需要强调，但又不得不用链接文字的固定颜色”的问题。

背景色
背景色也是一个应该与文字颜色一起考虑的元素。迷你屋商城视觉规范中定义的背景色，除了白色背景，另外主要还有两种：辅助的浅灰色和主色彩-橙色。

浅灰色是用于区隔内容，内容表达上并不总是能用边线来区隔的，那么可以使用这个浅灰色作为背景加以区隔。

主色调的背景下会出现各种文字，强调色的文字、正文文字、链接，甚至是辅助文字。因此需要背景色能适应上面所说的种种文字。

主色彩上的文字有可能会出现强调色文字，所以，主色彩和强调色文字不能是同一个颜色。主色彩上会显示链接，如果链接选用了蓝色文字颜色的方案，主色彩最好不选用蓝色，在蓝色背景下显示蓝色的链接，效果不好，如上图。

迷你屋选用了橙色。选用橙色是出于产品内涵的考虑，因为迷你屋是一个结合Qzone与QQ秀的产品，在黄与红之前。但是，作为主色彩，橙色并不是最好的选择，橙色比较抢眼、亮，页面上需要突出的是强调色的文字和突出的按钮，而不是主色彩。主色彩并不宜过亮。在橙色的基础上再选择更亮的颜色作为突出的文字颜色，我们选择了紫红。

网站栏目：大量的视觉设计基础设计出迷你屋商城视觉规范
转载来于：https://www.cdcxhl.com/news34/166784.html

成都网站建设公司_创新互联，为您提供建站公司、外贸网站建设、做网站、网站改版、网站建设、关键词优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联