time
   
     
  [ work ]
 
 
     
 
web design
ing >
 

PD010 原版设计书籍网站 ...

TD's web 导航设计与尝试 ...

学而思网校改版后的建议 ...

学而思网校站内banner VI设定 ...

IA+UI ` 大型网站的优化革命` 1 ...

IA+UI ` 大型网站的优化革命` 2 ...

IA+UI ` 大型网站的优化革命` 3 ...

E度网"小学生日记与口算“专题页 ...

Alite's blog 及栅格wvi ...

E度网内容页统一风格定位 →

TuiBo社交网站首页改版 ...

陈家刚个人网站设计 ...

a simple clock for iphone ...

有趣网形象设计 Cor - 1 ...

有趣网形象设计 Cor - 2 ...

基于百度app平台的应用设计 - 1 ...

基于百度app平台的应用设计 - 2 ...

基于百度app平台的应用设计 - 3 ...

基于百度app平台的应用设计 - 4 ...

基于百度app平台的应用设计 - 5 ...

基于百度app平台的应用设计 - 6 ...


-
banner & ad
more >
 
Dolcey, 道喜红酒圣诞促销活动 ...

-
graphic design
more >
 

City colour 城市艺术设计试验 ...

iPhone 3G 教学平台设计 ...

Gray City 济南市环境 ...

人民画报封面整合信息设计 ...


Chen Shizuo's dream ...


后海导视再设计 ...

SKELETON' 骸 ' 店logo ...

Supper School badge ...

IKEA 价签展示设计探讨 ...

国家大剧院海报设计 ...

Mˋ麦茉ˊ服装品牌logo设计 ...

李富强长篇小说封面设计 ...

Artrade 嘉德在线海报设计 ...

OA News letter 三星折页设计 ...

UI design for myself ...

Plate's details 版式比例关系研究 ...

TD's card 个人名片设计 ...

EDUU 编辑们的IDcard ...

EDUU LOGO设计 ...

 

JOB
The whole page visual perception
-

 
  Aug 10, 2010
 
     
  web pages design 「 网页页面设计 」

http://www.eduu.com/

 
     
   
                 
  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没有做到位,点进去之后每篇各自为政,脱离了整个产品的定位,没有体现出过程,和信息的内容构架区域,用户没有实在的了解这是一款贴身的信息产品,怎样使用它,他的优势在哪里。

︿ 把眼光拉远,站在成长导航这个平台上,他的下一级是各个页面,单个拿出页面问题不大,但放到一起却失去了整个产品的意义,风格各异没有一个整体的视觉形象,这样信息会像一盘散沙,用户没法通过直观的以知识群体的方式来查看信息,只能停留在对某一点的关注,而这种往往获取的是表皮的信息点,产生最终的效果很小,也不会对信息产生消费的转变,因为他们根本没有意识到这个整体的存在。信息的传达是有整到散的而这需要一个统一有层级结构的视觉体系来帮助他呈现信息。

不好意思我要提出一些尖锐的看法,不是针对人,而是行业,从专业的角度,许多人并不真正懂得设计,他们认为设计只不过是做个漂亮的界面而已。设计要考虑到诸如行为科学、社会科学、人类学或各种形式的设计留出时间,只会说”我感觉这样好看“”感觉有些不搭“是不行的。

设计不仅仅只是可视化交互的表现层,还关乎理解用户如何工作和使用,怎样将事物和人们的生活融合,人们是怎样看和理解事物的,他们的问题是什么,如何精心制作产品以解决用户的问题。视觉系统怎样和信息、用户身份相吻合,让我们做的每件事都有突破、没次努力都有成果吧。非价值不设计。

       
TOP   < prev work
Alite's blog 及栅格wvi
  Next work >
TuiBo社交网站首页改版
       
©2010 TD个人网站