|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| [ work ] | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
JOB |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Aug 10, 2010 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| web pages design 「 网页页面设计 」 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Times , 10.08.10 - 10.08.28 |
client , Company's website |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
最近做了不少安内容分的信息整合页,不能叫频道页因为没有频道页那么大,在其中发现很多问题也积累了一些经验。还是那些老生常谈的话题,整体的视觉系统,整体性最为重要。现在国内90%的网站都缺乏一个一致的视觉系统在里面这种一致性常常被一些设计师耐不住寂寞的性格所打破,一个好的页面设计师要在统一的视觉系统上创造出不一样的视觉表现形式。听起来比较虚,但只要多尝试,多思考是可以实现的。 现在的e度网上的设计,每页单拿出来看已经乱的不成样子,如果放在一起简直就没法看了,每一页都不同,风格上没有统一的视觉元素相互关联,内容上没有固定的几种板式强调架构。各自为政。有时单单一个屏上就有6种样式,这就是美工做的工作,没有大脑的随意把抄袭来的图像用到页面上,做一项东西时从不会分析需要视觉设计完成哪些任务,达到什么效果,而是直接打开资料库机械的把现成的元素用到当前页面当中。 而设计师往往是易用的角度出发,在发挥自己的创意对图形、色彩、形式重新设计定位,因情况不同而设计出合适的解决方案,考虑的问题也很多比如:这样的样式对于信息的呈现有什么影响?和其他元素的关系是什么?和主题的关系有是什么?放在这里解决了什么问题?整体的视觉形象给用户以什么样的体验?图片的选择会不会影响到整个页面的视觉系统?内容框的表现形式是为内容服务么?用什么颜色能与主题相符合,又不破坏整体的视觉系统?还有没有更好的解决方案?当方案设计完成之后在对整体的页面进行预览,与用户相互沟通,让用户提出自己的见解,观察他们的操作,分析哪些视觉元素影响到了他们,这种影响的方向是好的还是不好的,再决定取舍问题。 在设计中也总结了一些经验 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Times , 10.08.10 - 10.08.28 |
Tool , AI + PS + Firwork |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
︿ 展示其中的一个页面,页面的整体风格清新淡雅以内容的展现为主,配合GUI图标展示内容。各个内容区域的标签用色块的形式加以分隔,浏览者可以很清新的找到每个文字区域的内容标题。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ︿ 点击可见所有的6个页面的展示,以色彩区分但页内的元素和视觉形象都互相统一,如果每个页面都遵循一套特殊的视觉系统整个网站会在用户心中建立起一种视觉系统及其一种属于学而思的体验,他在浏览者心中的回忆是独一无二的,用户不会忽然跳转到某个页面而产生迷失的误解。通过这些小细节像是路标一样永远伴随着学而思的每一位用户。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ︿ 页面的主标题一定要统一,一个ico图标加上整个页面内容的标题。下面的不同内容区域要和标题栏分开色彩的明度、饱和度上要有区分,这样浏览者可以很清晰的分清标题栏和内容栏的界限,可以快速的让浏览者从标题过渡到到页内的内容。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ︿ 准确的图标配合整体的内容区域更加容易向浏览者清晰的传达内容,在保持色调、色相相同的情况下质感和明度上的区分也能够很好的划分每个内容区域的范围。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ︿ 每个相同内容层级下的区域整体感是很重要的,他可以使得用户通过扫过一眼以区域的形式阅览信息,同时在某一部分区域关注某些具体的信息点,这样浏览的过程使得知识在用户潜意识中国建立起来了一个正常的逻辑。更明确方便的阅览信息。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ︿ 说一下这些页面的来源,e度网定位是为了做到一个在教育行业集质询、电子商务、交流于一身的综合类教育门户,在咨询方面做的应该在整个教育界比较出色,编辑们很辛苦的在找资料,这次的成长导航就是一个咨询类的产品,内容做的很充实,但整体没有被统一起来,可以说是UI没有做到位,点进去之后每篇各自为政,脱离了整个产品的定位,没有体现出过程,和信息的内容构架区域,用户没有实在的了解这是一款贴身的信息产品,怎样使用它,他的优势在哪里。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
︿ 把眼光拉远,站在成长导航这个平台上,他的下一级是各个页面,单个拿出页面问题不大,但放到一起却失去了整个产品的意义,风格各异没有一个整体的视觉形象,这样信息会像一盘散沙,用户没法通过直观的以知识群体的方式来查看信息,只能停留在对某一点的关注,而这种往往获取的是表皮的信息点,产生最终的效果很小,也不会对信息产生消费的转变,因为他们根本没有意识到这个整体的存在。信息的传达是有整到散的而这需要一个统一有层级结构的视觉体系来帮助他呈现信息。 不好意思我要提出一些尖锐的看法,不是针对人,而是行业,从专业的角度,许多人并不真正懂得设计,他们认为设计只不过是做个漂亮的界面而已。设计要考虑到诸如行为科学、社会科学、人类学或各种形式的设计留出时间,只会说”我感觉这样好看“”感觉有些不搭“是不行的。 设计不仅仅只是可视化交互的表现层,还关乎理解用户如何工作和使用,怎样将事物和人们的生活融合,人们是怎样看和理解事物的,他们的问题是什么,如何精心制作产品以解决用户的问题。视觉系统怎样和信息、用户身份相吻合,让我们做的每件事都有突破、没次努力都有成果吧。非价值不设计。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||