《界面风格设计说明书》

62 阅读 0 评论 41 点赞

我是靠谱客的博主慈祥月饼，最近开发中收集的这篇文章主要介绍《界面风格设计说明书》，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、界面现状分析

（1）界面外观的横向、纵向比较

第一套界面色调柔和，亲和力较强，但长时间观看会较快失去新鲜感；
第二套界面色彩反差大，对视神经的刺激能保持较长时间的新鲜感；
Longhorn的界面色彩单纯明快。
略......

三套界面风格设计比较表：
1）明度
2）纯度
3）对比度
4）界面质感
5）优点
6）缺点

小节： 新改版的界面风格一定要有更强更持久的生命力，在传统的风格基础上有超前的设计理念，作为依附微软操作系统Longhorn而生存的应用型软件，界面外观更应该参考Longhorn的风格设计体系，和它的风格特征同步发展。

（2）硬件、软件环境分析

我们的产品定位......
界面的分辨率最低要满足800*600的用户，以1024*786为基准进行设计，界面的整体布局要适应更高分辨率的扩充效果。

小节： 登录、关于界面尽量图形化，突出品牌特色。界面以1024分辨率为基准进行设计，同时满足800分辨率，在更高分辨率下的整体外观也要协调，布局合理。

二、界面设计的主要因素

（1）设计环境

技术环境：受WEB和GUI不同的技术结构和传统风格的限制，界面外观会稍有不同。设计时要求尽量保证控件外观的一致性，企业信息门户的基本技术框架是由portlet组成，等同于GUI容器控件的概念，所以，如果能保证门户的portlet和GUI的容器在外观上一致，就很大程度上保证了WEB和GUI产品外观的一致性。

业务环境：portlet里面所展示的内容是用户完全可以自定义的，而这些内容大部分是GUI产品的内容，如果内容所呈现的外观差异大，就会引起用户视觉理解上的混淆，所以portlet所展示的内容外观必须和GUI的内容保持一致。另，portlet里面的内容是千变万化的，在进行容器设计时一定要注意简洁清爽，方便用户定制和查看。

产品特性：信息门户是WEB产品，在设计主界面时要适当体现WEB特色，如：增加动画效果的图片或flash，界面结构更为简洁，框架容易扩充。GUI的外观设计相对来说更加严谨，间距要尽量小，以最大限度展示业务内容为目的，要具有成熟稳重、简洁大方的GUI产品风格特征。

小节：信息门户的portlet和GUI的容器外观保持一致，并且是最简洁有效的色彩和造型；业务内容所呈现的外观在门户和GUI里都必须保持绝对一致；WEB的控件外观尽量和GUI的保持一致；信息门户主界面的设计要适当体现web产品特性。

（2）目标用户心理

操作使用：色彩的基本作用是区分功能模块和对业务流程进行视觉导向。所以，色彩的应用要有远近层次感，体现导向功能；对于功能模块的区分，色系的应用依据规范的理论基础，如：蓝色系表示选中、编辑；黄色系表示警示、注明；绿色系表示通过、安全。色彩的选用首先要保证这两方面功能的实现，在此基础上再考究色彩之间的美观协调性。

感观享受：美观是产品销售过程中提高竞争力的策略之一，同时也可以保持用户对产品的新鲜感，并提高用户使用产品的忠诚度。所以，外观的整体设计要有超前意识，设计灵感来源于用户但要高于用户。让他们在繁忙工作的同时得到心灵上的享受。

小节：色彩的基本作用是区分功能模块，对业务流程进行视觉导向；色彩的选用首先要保证这两方面功能的实现，在此基础上再考究色彩之间的美观协调性；设计灵感来源于用户但要高于用户，提高用户的欣赏水平并保持相当长时间的新鲜感和忠诚度。

三、品牌应用

略......
小节：辅助形沿用天空和大海，但没有“形态”只有“神韵”，宣传一种企业文化精神。

四、典型界面描述

安装、登录、关于典型界面的设计要体现“天高任鸟飞、海阔任鱼游”的意境。亮蓝色色系为主，加很少亮的橙色做对比呼应，界面的感觉要轻灵通透、有活力、质感要强，整体外观给人要有耳目一新的触动感；

向导、信息提示界面亮蓝色系为主，但背景要求清爽简洁，设计的图形化符号表意要明确，造型
要美观，由于表意的载体元素（如：信息提示的问号）要遵循通用性原则，但为了突出产品特色，在元素的造型上建议设计为立体效果，这样会有让人过目不忘的新颖感。

小节：把天空大海的“神韵”融入典型界面中；建议图形符号处理为立体效果，加强外观设计的新颖感。

五、主界面描述

GUI主界面：色彩主要集中在界面上部（菜单栏、工具栏、页签），蓝色为主色调，色彩的明度、纯度、饱和度要较高；下面操作区的颜色以白色为主，配浅灰色和少量其它颜色，色调简洁明快；上下色调形成较强反差，以刺激用户的视觉感观，保持较长时间的新鲜感，用户的感官享受重点体现在上面部分。主操作区域，包括树菜单、报表、容器等控件，背景色调为浅灰渐进色系，要有明确的视觉导向和模块区别功能，稍鲜艳的蓝色系、黄色系、绿色系起画龙点睛的作用，用色要有理由，有明确的业务需求来源。

信息门户主界面：和GUI外观原则上保持一致，不同的地方：信息门户的框架和业务层次相对简单，色系的应用在GUI基础上更简洁，但图案（图标）元素的色彩可以更丰富美观。信息门户主界面的主要功能特征为：各功能模块或产品的入口！要体现灵活，易用，易看的特性。界面色彩和结构的可扩展性要重点考虑。

小节：界面色调单纯，简洁明快，上下部分行形成较强反差。GUI界面风格原则上和门户保持一致，门户的用色相对GUI更为简洁。整套界面的用色原则为：亮灰色为主，应用于背景色（65％），蓝色体现设计亮点和品牌特色（23％），黄色、绿色为辅助色，主要应用于业务需求（10％），其它彩色做点缀（2％）。

六、图标设计描述

（1）颜色：亮灰色系为主（45％），蓝色系为辅（35％），绿色、黄色（15％），其它彩色（5％）。亮灰色（白色）为主的应用，使图标在不同背景色下都能适应，并保证一定的认知度和美观性。

（2）造型：GUI的工具栏图标平面化，结构简洁，单元元素最多2－3个；系统图标和个性化设置图标立体化，大小为32*32，色彩更丰富细腻；工作流图标的色彩和造型完全为表意服务，平面和立体都可以，根据表意需要进行设计；树图标，首先是要区别类别，其次是表意，表示不同类业务的图标造型和色彩差异要稍大。所有图标单元元素和色彩的应用要遵循一定的业务规范，要有章可循。

（3）质感：大部分图标是不透明的实体，无锯齿，光滑圆润，有层次感；特殊的大图标可以设计得更有特色，体现艺术和美观特性。

小节：小图标为平面造型，用色简洁，单元元素最多不能超过3个。工具栏和工作流图标造型为表意服务，树图标表意为造型服务，侧重点不同。所有图标单元元素和色彩的应用要遵循一定的内部规范。亮灰色系为主（45％），蓝色系为辅（35％），绿色、黄色（15％），其它彩色（5％）做点缀。