王朝网络
分享
 
 
 

《界面风格设计说明书》

王朝other·作者佚名  2006-01-30
宽屏版  字体: |||超大  

一、 界面现状分析

(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%)做点缀。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
>>返回首页<<
推荐阅读
 
 
频道精选
 
静静地坐在废墟上,四周的荒凉一望无际,忽然觉得,凄凉也很美
© 2005- 王朝网络 版权所有