透明湖 2008-1-8 10:48
关于界面设计说明的撰写参考
在网上看到的一篇，觉得还可以，供大家参考！
[font=宋体]一、[/font][font=Times New Roman] [/font][font=宋体]界面现状分析[/font]
[font=宋体]（[/font][font=Times New Roman]1[/font][font=宋体]）界面外观的横向、纵向比较[/font]
[font=宋体]第一套界面色调柔和，亲和力较强，但长时间观看会较快失去新鲜感；[/font]
[font=宋体]第二套界面色彩反差大，对视神经的刺激能保持较长时间的新鲜感；[/font]
[font=Times New Roman]Longhorn[/font][font=宋体]的界面色彩单纯明快。[/font]
[font=宋体]略[/font][font=Times New Roman]......
[/font][font=宋体]三套界面风格设计比较表：[/font]
[font=Times New Roman]1[/font][font=宋体]）明度[/font][font=Times New Roman]
2[/font][font=宋体]）纯度[/font][font=Times New Roman]
3[/font][font=宋体]）对比度[/font]
[font=Times New Roman]4[/font][font=宋体]）界面质感[/font]
[font=Times New Roman]5[/font][font=宋体]）优点[/font]
[font=Times New Roman]6[/font][font=宋体]）缺点[/font]
[font=宋体]小节：[/font][font=Times New Roman] [/font][font=宋体]新改版的界面风格一定要有更强更持久的生命力，在传统的风格基础上有超前的设计理念，作为依附微软操作系统[/font][font=Times New Roman]Longhorn[/font][font=宋体]而生存的应用型软件，界面外观更应该参考[/font][font=Times New Roman]Longhorn[/font][font=宋体]的风格设计体系，和它的风格特征同步发展。[/font]
[font=宋体]（[/font][font=Times New Roman]2[/font][font=宋体]）硬件、软件环境分析[/font]
[font=宋体]我们的产品定位[/font][font=Times New Roman]......
[/font][font=宋体]界面的分辨率最低要满足[/font][font=Times New Roman]800*600[/font][font=宋体]的用户，以[/font][font=Times New Roman]1024*786[/font][font=宋体]为基准进行设计，界面的整体布局要适应更高分辨率的扩充效果。[/font]
[font=宋体]小节：[/font][font=Times New Roman] [/font][font=宋体]登录、关于界面尽量图形化，突出品牌特色。界面以[/font][font=Times New Roman]1024[/font][font=宋体]分辨率为基准进行设计，同时满足[/font][font=Times New Roman]800[/font][font=宋体]分辨率，在更高分辨率下的整体外观也要协调，布局合理。[/font]
[font=宋体]二、[/font][font=Times New Roman] [/font][font=宋体]界面设计的主要因素[/font][font=Times New Roman]
[/font][font=宋体]（[/font][font=Times New Roman]1[/font][font=宋体]）设计环境[/font]
[font=宋体]技术环境：受[/font][font=Times New Roman]WEB[/font][font=宋体]和[/font][font=Times New Roman]GUI[/font][font=宋体]不同的技术结构和传统风格的限制，界面外观会稍有不同。设计时要求尽量保证控件外观的一致性，企业信息门户的基本技术框架是由[/font][font=Times New Roman]portlet[/font][font=宋体]组成，等同于[/font][font=Times New Roman]GUI[/font][font=宋体]容器控件的概念，所以，如果能保证门户的[/font][font=Times New Roman]portlet[/font][font=宋体]和[/font][font=Times New Roman]GUI[/font][font=宋体]的容器在外观上一致，就很大程度上保证了[/font][font=Times New Roman]WEB[/font][font=宋体]和[/font][font=Times New Roman]GUI[/font][font=宋体]产品外观的一致性。[/font]
[font=宋体]业务环境：[/font][font=Times New Roman]portlet[/font][font=宋体]里面所展示的内容是用户完全可以自定义的，而这些内容大部分是[/font][font=Times New Roman]GUI[/font][font=宋体]产品的内容，如果内容所呈现的外观差异大，就会引起用户视觉理解上的混淆，所以[/font][font=Times New Roman]portlet[/font][font=宋体]所展示的内容外观必须和[/font][font=Times New Roman]GUI[/font][font=宋体]的内容保持一致。另，[/font][font=Times New Roman]portlet[/font][font=宋体]里面的内容是千变万化的，在进行容器设计时一定要注意简洁清爽，方便用户定制和查看。[/font]
[font=宋体]产品特性：信息门户是[/font][font=Times New Roman]WEB[/font][font=宋体]产品，在设计主界面时要适当体现[/font][font=Times New Roman]WEB[/font][font=宋体]特色，如：增加动画效果的图片或[/font][font=Times New Roman]flash[/font][font=宋体]，界面结构更为简洁，框架容易扩充。[/font][font=Times New Roman]GUI[/font][font=宋体]的外观设计相对来说更加严谨，间距要尽量小，以最大限度展示业务内容为目的，要具有成熟稳重、简洁大方的[/font][font=Times New Roman]GUI[/font][font=宋体]产品风格特征。[/font]
[font=宋体]小节：信息门户的[/font][font=Times New Roman]portlet[/font][font=宋体]和[/font][font=Times New Roman]GUI[/font][font=宋体]的容器外观保持一致，并且是最简洁有效的色彩和造型；业务内容所呈现的外观在门户和[/font][font=Times New Roman]GUI[/font][font=宋体]里都必须保持绝对一致；[/font][font=Times New Roman]WEB[/font][font=宋体]的控件外观尽量和[/font][font=Times New Roman]GUI[/font][font=宋体]的保持一致；信息门户主界面的设计要适当体现[/font][font=Times New Roman]web[/font][font=宋体]产品特性。[/font]
[font=宋体]（[/font][font=Times New Roman]2[/font][font=宋体]）目标用户心理[/font]
[font=宋体]操作使用：色彩的基本作用是区分功能模块和对业务流程进行视觉导向。所以，色彩的应用要有远近层次感，体现导向功能；对于功能模块的区分，色系的应用依据规范的理论基础，如：蓝色系表示选中、编辑；黄色系表示警示、注明；绿色系表示通过、安全。色彩的选用首先要保证这两方面功能的实现，在此基础上再考究色彩之间的美观协调性。[/font]
[font=宋体]感观享受：美观是产品销售过程中提高竞争力的策略之一，同时也可以保持用户对产品的新鲜感，并提高用户使用产品的忠诚度。所以，外观的整体设计要有超前意识，设计灵感来源于用户但要高于用户。让他们在繁忙工作的同时得到心灵上的享受。[/font]
[font=宋体]小节：色彩的基本作用是区分功能模块，对业务流程进行视觉导向；色彩的选用首先要保证这两方面功能的实现，在此基础上再考究色彩之间的美观协调性；设计灵感来源于用户但要高于用户，提高用户的欣赏水平并保持相当长时间的新鲜感和忠诚度。[/font]
[font=宋体]三、[/font][font=Times New Roman] [/font][font=宋体]品牌应用[/font]
[font=宋体]略[/font][font=Times New Roman]......
[/font][font=宋体]小节：辅助形沿用天空和大海，但没有[/font][font=Times New Roman]“[/font][font=宋体]形态[/font][font=Times New Roman]”[/font][font=宋体]只有[/font][font=Times New Roman]“[/font][font=宋体]神韵[/font][font=Times New Roman]”[/font][font=宋体]，宣传一种企业文化精神。[/font]
[font=宋体]四、[/font][font=Times New Roman] [/font][font=宋体]典型界面描述[/font]
[font=宋体]安装、登录、关于典型界面的设计要体现[/font][font=Times New Roman]“[/font][font=宋体]天高任鸟飞、海阔任鱼游[/font][font=Times New Roman]”[/font][font=宋体]的意境。亮蓝色色系为主，加很少亮的橙色做对比呼应，界面的感觉要轻灵通透、有活力、质感要强，整体外观给人要有耳目一新的触动感；[/font][font=Times New Roman]
[/font][font=宋体]向导、信息提示界面亮蓝色系为主，但背景要求清爽简洁，设计的图形化符号表意要明确，造型[/font]
[font=宋体]要美观，由于表意的载体元素（如：信息提示的问号）要遵循通用性原则，但为了突出产品特色，在元素的造型上建议设计为立体效果，这样会有让人过目不忘的新颖感。[/font]
[font=宋体]小节：把天空大海的[/font][font=Times New Roman]“[/font][font=宋体]神韵[/font][font=Times New Roman]”[/font][font=宋体]融入典型界面中；建议图形符号处理为立体效果，加强外观设计的新颖感。[/font]
[font=宋体]五、[/font][font=Times New Roman] [/font][font=宋体]主界面描述[/font]
[font=Times New Roman]GUI[/font][font=宋体]主界面：色彩主要集中在界面上部（菜单栏、工具栏、页签），蓝色为主色调，色彩的明度、纯度、饱和度要较高；下面操作区的颜色以白色为主，配浅灰色和少量其它颜色，色调简洁明快；上下色调形成较强反差，以刺激用户的视觉感观，保持较长时间的新鲜感，用户的感官享受重点体现在上面部分。主操作区域，包括树菜单、报表、容器等控件，背景色调为浅灰渐进色系，要有明确的视觉导向和模块区别功能，稍鲜艳的蓝色系、黄色系、绿色系起画龙点睛的作用，用色要有理由，有明确的业务需求来源。[/font]
[font=宋体]信息门户主界面：和[/font][font=Times New Roman]GUI[/font][font=宋体]外观原则上保持一致，不同的地方：信息门户的框架和业务层次相对简单，色系的应用在[/font][font=Times New Roman]GUI[/font][font=宋体]基础上更简洁，但图案（图标）元素的色彩可以更丰富美观。信息门户主界面的主要功能特征为：各功能模块或产品的入口！要体现灵活，易用，易看的特性。界面色彩和结构的可扩展性要重点考虑。[/font]
[font=宋体]小节：界面色调单纯，简洁明快，上下部分行形成较强反差。[/font][font=Times New Roman]GUI[/font][font=宋体]界面风格原则上和门户保持一致，门户的用色相对[/font][font=Times New Roman]GUI[/font][font=宋体]更为简洁。整套界面的用色原则为：亮灰色为主，应用于背景色（[/font][font=Times New Roman]65[/font][font=宋体]％），蓝色体现设计亮点和品牌特色（[/font][font=Times New Roman]23[/font][font=宋体]％），黄色、绿色为辅助色，主要应用于业务需求（[/font][font=Times New Roman]10[/font][font=宋体]％），其它彩色做点缀（[/font][font=Times New Roman]2[/font][font=宋体]％）。[/font]
[font=宋体]六、[/font][font=Times New Roman] [/font][font=宋体]图标设计描述[/font]
[font=宋体]（[/font][font=Times New Roman]1[/font][font=宋体]）颜色：亮灰色系为主（[/font][font=Times New Roman]45[/font][font=宋体]％），蓝色系为辅（[/font][font=Times New Roman]35[/font][font=宋体]％），绿色、黄色（[/font][font=Times New Roman]15[/font][font=宋体]％），其它彩色[/font][font=Times New Roman] [/font][font=宋体]（[/font][font=Times New Roman]5[/font][font=宋体]％）。亮灰色（白色）为主的应用，使图标在不同背景色下都能适应，并保证一定的认知度和美观性。[/font]
[font=宋体]（[/font][font=Times New Roman]2[/font][font=宋体]）造型：[/font][font=Times New Roman]GUI[/font][font=宋体]的工具栏图标平面化，结构简洁，单元元素最多[/font][font=Times New Roman]2[/font][font=宋体]－[/font][font=Times New Roman]3[/font][font=宋体]个；系统图标和个性化设置图标立体化，大小为[/font][font=Times New Roman]32*32[/font][font=宋体]，色彩更丰富细腻；工作流图标的色彩和造型完全为表意服务，平面和立体都可以，根据表意需要进行设计；树图标，首先是要区别类别，其次是表意，表示不同类业务的图标造型和色彩差异要稍大。所有图标单元元素和色彩的应用要遵循一定的业务规范，要有章可循。[/font][font=Times New Roman]
[/font][font=宋体]（[/font][font=Times New Roman]3[/font][font=宋体]）质感：大部分图标是不透明的实体，无锯齿，光滑圆润，有层次感；特殊的大图标可以设计得更有特色，体现艺术和美观特性。[/font]
[font=宋体]小节：小图标为平面造型，用色简洁，单元元素最多不能超过[/font][font=Times New Roman]3[/font][font=宋体]个。工具栏和工作流图标造型为表意服务，树图标表意为造型服务，侧重点不同。所有图标单元元素和色彩的应用要遵循一定的内部规范。亮灰色系为主（[/font][font=Times New Roman]45[/font][font=宋体]％），蓝色系为辅（[/font][font=Times New Roman]35[/font][font=宋体]％），绿色、黄色（[/font][font=Times New Roman]15[/font][font=宋体]％），其它彩色（[/font][font=Times New Roman]5[/font][font=宋体]％）做点缀。[/font]
imwayne 2008-9-15 12:28
部分而言
楼主文中说的确切的说是视觉部分的设计说明，其实这个对于界面视觉设计环节来说是合适的，也是必须。但对于“界面设计说明”这个大的范围来说，就不能代表界面设计说明了。仅仅是部分而言。