政府网站UI设计研究与探讨
政府网站设计,区别于平时接触的企业站设计有很大的差异性。不论是从功能、业务、设计布局上,政府网站更加严谨、庄重和规范。或许在设计企业站时,可以运用的设计手法有很多,设计规范也没有那么拘谨,可设计的范畴相对较大,设计衍生和创新的空间也更大。但是一个优秀的政府网站,在严格遵守设计规范以及政策文件指引下,在有限的空间内做出不一样的创新时,就更具挑战。
如何做好政府网站设计,如何设计出一个标杆性政府网站?下文将从政策指引、设计趋势、设计原则、设计目标以及设计方法五个方面进行剖析和探讨。
政策指引
所涉及到的所有政府网站UI页面设计,都需要严格遵循国办47号文要求。国办47号文,从展现、布局、栏目、频道、专题5个方面,对政府网站设计提出规范性要求。其中在页面设计展现最直接,在设计沟通确认过程中最容易失误的几点,也是国办47号文一开头就重点强调的几点:
政府网站应简洁明了,清新大气,保持统一风格,符合万维网联盟(W3C)的相关标准规范要求。
这一点主要是为了规范部分项目在设计过程中,过于追求创新,导致首页和各个频道页或其他页面风格不统一。每个页面接近于一个独立的首页,这一设计方法是不合适的,除了不符合47号文指引,也是不符合设计统一性原则的,相应的用户体验感也不好。
府网站应确定1种主色调,合理搭配辅色调,总色调不宜超过3种。使用符合用户习惯的标准字体和字号,同一类别的栏目和信息使用同一模板,统一字体、字号、行间距和布局等。
这一点,不仅仅在政府网站建设上要遵循该规律,平时生活中,各种情景设计上,都适用。比如的日常穿衣,如果服装搭配设计超过3个颜色,也是不合适的,颜色过多,少了一分庄重和安静。对大多数人来说,是不舒适的视觉体验。在建设政府网站时,除了对字体字号,行间距做了统一规范,同时针对颜色,布局以及图片比例等各个细节方面也做了严谨的规范。这样确保在设计过程中,有规范可依,制作出的页面更加严谨和规范。
按照适配常用分辨率的规格设计页面,首页不宜过长。在主流计算机配置和当地平均网速条件下,页面加载时长不宜超过3秒。
在部分网站建设中会遇到,该网站有较多栏目要展示,希望把每个部门,甚至频道页的内容都放到首页,这样不断的堆积,导致页面过长。页面过长或页面中大面积的使用图片或视频或导致页面加载速度过慢,同时也容易造成用户阅读疲劳。
设计趋势
极简主义
极简主义这种风格已经流行了很多年,追求Less ismore的理念,设计上追求极简和留白,拒绝奢华,减少视觉上的干扰,让用户得以聚焦内容本身;这一理念深深影响着设计行业的各个领域。典型案例如下图。广东政务服务网。设计风格简洁时尚,提倡简约、自然、富质感的生活哲学,配色柔和、舒适、清新大气。
扁平化
扁平化设计也受到极简主义的影响,去除冗余、厚重和繁杂的装饰效果,倡导简单、清晰、空间、留白等,突出核心的设计元素一直是扁平化的设计核心。虽然已经流行多年,但这种设计风格在2019势必依旧会流行;不过2017年微软推出了流畅设计体系(Fluent Design System),包含五大核心元素:光线、深度、动效、材质和缩放,拓展了UI的设计维度,营造出空间感、3D立体感、未来感,这种风格有别于扁平化,相信会在未来的设计趋势中注入新的血液。只是这五大特效,对于政府网站并不是特别合适。扁平化案例网站案例较多,下图,浙江省人民政府网站为例。
浙江省政府整体页面,以简单的蓝色渐变为背景、各个区块以明暗相间的纯色区分开,没有过多装饰,简单大气。不论是顶部导航、内容区还是底部版权区,设计方式以及交互形式都是以扁平为主。细节刻画上,面性图标以及扁平的智能小机器人,在整个页面生动而不突兀。
icon设计细致化
icon的表现方式主要有:线性、面性、填充、扁平、轴测 (2.5D)、拟物、微拟物、实物等;主要应用于导航栏、标签栏、宫格导航、列表导航等位置。和以往单调的在面性icon上做颜色渐变等效果不同的是,去年在icon的设计中对细节的刻画会越来越注重,比如用色彩的搭配和明暗对比来表现icon的层次、颜色的透明度叠加效果等;再比如微拟物icon,通过模拟真实物体的质感、细节、光亮等表现手法,icon的识别度会变得更高,再结合明亮的配色,icon会变得更加真实。具体的案例可以看下图
内蒙古自治区人民政府的图标以手工绘制的插画风为主,个性化的插画图标往往比抽象的文字更有趣,更具有视觉冲击力,更能彰显主题或应用特色,传递给用户更深刻内蒙印象。
当然图标的表现方式有很多,另一个优秀案例,如下图河南省政务服务网的双色线性图标。双色的使用使图标视觉更加丰富,一个主色和一个辅助色搭配,两种颜色可以互为补色,也可以是类似色。下图一采用双色蓝绿渐变图标,下图二则是采用双色线面结合图标。不同的结合方式,呈现的视觉效果自然也是不同的。但是不论如何设计,都要遵循统一性。从视觉上来说,要实现统一,无外乎颜色统一、线条粗细统一、表现形式统一、创新方式统一等。
形式感
腾讯设计师晋小彦出过一本书《形式感+:网页视觉设计创意拓展与快速表现》,里面写了很多关于形式感设计方法论,比如抄现实的三步骤:减法、分块、加法,把现实事物提取形态,然后把信息内容与形态结合排版形成一个整体,让画面更形象生动有趣。如下图
渐变色
在设计渐变色的时候,要做到色彩的过渡柔和,颜色明快,避免生硬,可以有效的提升用户体验。在设计政府网站时往往运用最多的是双色板渐变,即两种颜色渐变,它们之间有平滑过渡。这种类型的渐变最广泛使用是照片叠加或纯色渐变。渐变主要用作内容的简单背景。如下图
广东政务服务网以淡蓝色渐变结合广东建筑为背景,相互叠加却安静的作为衬托主体内容的背景,整体色调饱和度以及舒适度处理的非常合适。
区别于广东政务服务网,河南政务采用纯色深蓝渐变,科技感较强。同时和内容区的蓝绿色配合的相得益彰,既不抢主体,又很有分量的压住了页面,整体庄重大气,又不显得沉闷。如下图
设计原则
亲密性原则
将相关的元素组织在一起,移动这些元素,使它们的物理位置相互靠近,这样一来,相关的元素将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。当然,如果某些信息元素或组彼此之间并无关联,这些元素就不应存在很近的亲密性(即不应靠近)。这样就能为用户提供一个直观的提示,使用户马上了解页面的组织和内容。简单说,即同类相近,异类相远。如下图
简单性原则
UI设计趋势越来越遵循简单原则,大而简的设计语言。去掉不必要的视觉元素,减少干扰。做减法,用留白去塑造简单。用户喜欢看规整的界面,而不是毫无规则的界面。主要从以下几个方面入手:
- 1)字体:字号不宜使用过多。一个单元内的信息,保持在3种以内的字号,即大中小,相差值在4-6px左右(特殊案例可另做考究);
- 2)分割线:很多页面设计开始去线化设计,以达到简洁清晰的视觉效果。尽量使用留白分割模块,如果要使用分割线,分割线要淡;
- 3)线框:越来越多的用浅灰背景来代替,去除线框的视觉复杂冗沉,灰色色块更加简洁;
- 4)排版:各个元素之间的间距组合不宜过多。一般3-4种组合即可。过多会导致界面比较散、零碎。没有主次之分。
工整性原则
任何元素都不能在页面上随意安放,每一元素都应当与页面上的某个内容存在某种视觉联系。如果页面上的一些元素是对齐的,这会得到一个更内聚的单元。即使对齐的元素物理位置是彼此分离的,但在你眼里(以及在你的心里)它们之间也会有一条看不见的线把彼此连在一起。不知道大家有没有听过一句话,整齐即是美。如
重复性原则
如何让页面各个元素或单元看起来更一致,从而达到用户认知减负?在同类型内容模块的设计时,减少过多结构样式的表达形式,保持韵律感和统一性,给用户内容丰富但结构简明的视觉认知。简单说,即是要设计的某些单元需要在整个页面中重复。重复元素可能是一种粗字体、一条粗线、某个项目符号、颜色、设计要素、某种格式、空间关系等。读者能看到的任何方面都可以作为重复元素。在网站建设中肯定已经用过重复。例如,所有标题都设置为相同的大小和粗细,项目中的每个列表都使用相同的项目符号,这些都是重复的例子。如
黄金比例
黄金比例是在UI设计当中用的较多的一个比例,此比例通过了自然界各大数据的验证,天衣无缝。在实际项目中,使用黄比例的作品,往往更具有美感,令人赏心悦目。图3-5即为黄金比例分割的参考。可以根据页面设计需求,按照图3-5的比例,填充和丰富空白区域。
除了黄金比例,其实还有着白银铂金等比例,这类比例也是具有着较多的美感。这些比例可根据UI设计需要灵活运用,不可过于经验主义。
构建“能用、好用、易用、想用”的政府网站一直是追求的最终目标,如何实现也在一步步学习、探索和优化中。如下图
类似于马斯洛的需求金字塔,将用户的需求分为三个层级,从而达到金字塔顶部的最终目标。高效为人民服务为基石,塑造用户信任感为进阶,最终目标是为了彰显政府形象。关于每个目标的实现,如上图,从多个不同角度,细节优化从而实现每个阶段的目标。比如如何做到高效,除了考虑到所有正常使用界面的用户,也考虑到一些社会弱势群众,从而将无障碍设计理念不断灌输和融入的页面设计。集中用户注意力,降低信噪比,多终端适配,提高文字阅读率等各个方面,对的设计要求也越来越高。所以很多时候,页面设计的字体大小,字体颜色都是经过多次测试,最终能够最大限度满足各个阶层年龄段的用户,呈现到大家面前的。举个最简单的例子,为了让用户在不同环境和不同设备上看到页面的最佳效果。会在昏暗的环境下、室外强日光、以及正常室内灯光下做颜色测试和选择。所以部分项目会提出,颜色能否亮一点、暗一点,这些没有经过测试的颜色,在正常灯光下是没有问题的。一旦在其他环境下,颜色美观就没法保证了。
设计方法
关于每位设计师工作方法,都各自有各自熟练并擅长的方式。详细的解析,估计可以专门做一个研究和分析。在这里,针对共性做一个梳理和探讨。
探索调研
在接到一个项目时,UI设计师大都会针对该项目做一个了解和深入调研,为此,还特地设计了用户调研表。从网站色调,风格,页面框架内容,需要突出的重点功能或业务,城市特色 、人文特色、城市宣传口号 、 政府路线、指导思想等内容,多层级多方位的去收集信息资料,从而达到后期设计的更精准化。
设计策略
针对不同年龄用户获取政府信息和使用网上政务服务特征做了总结和分析,针对收集上来到的调研信息,设计师开始对建设的网站项目进行画像。即通过调研明确设计方向与思路,以合适的设计原则为指引,初步确定适合的设计风格。对网站栏目进行分析解剖,绘制框架图,并初步做出网站设计初稿。
沟通策略
在完成初稿后,也是最关键的设计环节——沟通设计。沟通是一门学问,需要长期的积累和锻炼。作为一名UI设计师,除了要具备基础的视觉理论知识,同时也要具备分析和梳理产品需求的能力。要能清晰有效的表达设计思路,思维逻辑缜密,阐述时有条有理,把设计方案清晰陈述,并展开有效交流。很多设计师被客户、领导、项目经理、开发打回设计或提海量建议,有时并不是设计本身质量问题,而是设计思路交流过程中没有达成共识。设计师不能沉浸在自我的设计世界里,毕竟是为公司、客户、用户设计产品,产品的业务形态,产品全局思路很重要,需要足够理解。
测试验证
在页面沟通确认后,还有个后续很关键的环节,即-售后设计。为什么称为售后设计呢?原因很简单,虽然前期对用户做了很多调研和分析,也有很多数据支撑。通过不断的磨合和沟通,最终确认上线了,至少在现阶段大家都是满意的。但是互联网是一个高速发展,不断更新迭代的领跑者。只有不断的观察和学习,才能与时俱进。网站上线后,会对用户进行观察,并根据最新的访问数据不断调整和优化页面。对用户进行线上线下调研和访谈,从而保证的网站设计,时刻能够引领潮流,真正做到以用户为中心。
方法、理论不是一成不变的,要学会灵活运用和创作。创意是设计的灵魂,要充分理解政府网站设计的规范限制、技术限制、资源限制等,但是不能放弃追求创新的心气和理念。理解政府网站全局并对国内外政府网站有了深入的分析后,结合设计理论和设计原则,加入自己设计创新的点去思考和深入。设计师能够解决网站建设中的难点,这是基本;如果能创造性的解决难点,才是上策。很多政府网站设计能否有一定突破,很大程度决定于设计师是否愿意尝试创意的一瞬间。
总结
设计作为一门永无止境的学习和探索课程,每个阶段、每一名设计师都会对自己的设计有着不同层面,不同领域上的理解和总结。没法硬性的给设计设置分数评定,因为人的主观性、审美各有不同,所以自己喜欢的风格会不自觉的增加好感。不同年龄层、性别以及性格等都会影响对美的定义,对页面设计喜好的判断,所以一个好的页面设计不是让每个人都十分满意,但必须是大部分人都认可,觉得舒适的页面。
- 感谢你赐予我前进的力量