一、 界面现状分析
(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%)做点缀。