|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| [ work ] | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Try & Experiment and ...Scam Ad |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Aug 10, 2010 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| web pages design & wvi 「 网页页面设计/视觉体系 」 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Times , 10.08.12 - 10.08.16 |
client , Friends' website |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
为一位朋友做了几个BLOG的页面,重在表现内容。视觉方面重在追求图形上的简捷、明快。颜色饱和度和明度区域中间以温和柔和的视觉效果来构成整个页面。这样用户在阅读正文时不会因为旁边的视觉元素来干扰到实现,眼睛也可以在这种柔和的色调中停留比较长的时间而不觉得疲惫。形状的简单更能说明出用户的专业方向和整体BLOG的内容方向。 改版的过程是开始先对原版进行实际操作找出问题,然后结合视觉设计专业和用户体验来解决问题。直面问题和修改方案,这样无论是谁有不足就会一目了然。我先提出原版的问题,然后在说明我是怎么改的,在这过程中我更希望有人在提出我的问题,这才达到了我的目的。 这次还有一项重要的尝试计划实现了,经过细致的调节我把整个版式的视觉系统数据化,这样用他可以复制出相同的页面,我想这对于一个大型的网站的意义是很大的,他是整个网站风格统一的基础,用户体验大大的提高。 由于某些原因没能实际用上,但我觉的没有理由不把这个飞机稿做的更加完善些,因为我为此付出,并从中得到。外部评价系统像是一种遗传,但你完全可以打破它,要培育自己的内部评价体系,永远不要忘了成长。 最后向大家推荐下这位朋友Alite,是阿里巴巴的交互设计师,在交互上面很多好的见解和经验。上面有他blog地址,文章写的每篇都值得看。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Times , 10.08.12 - 10.08.26 |
Tool , AI + PS + Firwork + IconWorkshop |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ︿ 先展示一下,下面说细节 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
︿ 原版头图:禅意花园-后面有接个英文的“Alite设计工作室”而“生活中…”这句话是颇有平面设计理论的意思,貌似是设计来源于生活的加长版,其意又和交互在感觉上相差甚远,用户在第一眼阅读时不知道你是谁,你是干嘛的。 ·自己有logo就用上,以自己名字设计的logo是比较合理的,后面加上你的专业范围BLOG主要讨论的主题。并且以词语的语言表示,因为用户更喜欢一次的方式来阅读。这样可以比阅读一句话更快捷、准确的明白语句的意思。如果非要加入设计感言的话,最好是和LOGO拉开距离。这样用户可以舒服的读完所有信息。头图上的图像是一些不同形式的对话框,表现交互、交流这个专业。 ·原版的导航区域:1.全站中只有导航部分是用英文和整体页面预言及其不相符,而且大写和衬线字体很不利于阅读理解。ABOUTME单词之间没有空格等问题让人有些标签词汇不明确让人不知其意。2. 导航分为首页、服务、日志、关于我、友情链。这些二级页面中照片只有两张作者的照片,其余的没什么信息。服务做事方法和能力的说明而且内容比较少这两项都可以应该归纳到关于我这个页面中。3.禅意两字的logo没有任何联系而全站没有任何关于禅意的阐述,实际是一个豆瓣小组的名字,但如果没有明确入口的话突然出现这一个不能点击的logo只能使得整个页面更加混乱。明确入口很重要,这样会给用户清新的预期。 ·BLOG特点是主题以日志为主一般是图文并茂说明问题,导航一般分为关于我,友情链接和一些其他平台的分享入口,用户进入之后主要是对日志进行浏览阅读。不要因为导航的过于复杂而把注意力引导一些没有内容的页面,让用户产生走错路的体验,我把导航大胆的放到了LOGO的正上方这样用户如用到上述链接能够很快捷的找到他们的位置,并且当看到这些导航内容时更加确定这是一个BLOG站而不是什么复杂的网站,把注意力集中到查询日志内容中。关于其他平台的链接入口要和导航的功能要加以区分。让用户以自信的方式进入到有所预期的区域。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
︿ 正文日志排版问题,有端出现的对话框图标不知道是何意而用户一般不会关心在一定范围内的评论了多少条这个信息,版权声明加在题目与正文之间破坏了整体的信息层级,一眼扫过不能明确出正文到底从哪里开始的。而且用户没有看到文章之前就把版权放在前面对显得自大,用户的不尊重。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
︿ 原版的BLOG页面整体视觉元素一黑色为主,带有纹理,整体风格还算统一,但不适合与在以大量文章为主的网站,因为黑色给人一种沉重的感觉而且颜色重量感十分强,已占据人们视线的注意力,在人们阅读文章时眼睛的余光很容易受到干扰,这是阅读起来就潜意识的觉得不舒服,理解力也会下降。这次我选用的是以柔和的蓝色为主。背景的微微泛黄像是在下午柔和的阳光下看书一样的情景营造了一种安静、淡雅的环境,让用户可以把神注意力放到内容上去,不被页内的强烈的视觉元素所打扰。 ·页面上的视觉元素一定要统一设计,这样会给用户建立起在视觉上的心智模型,因为形式、颜色的统一无论出现的在哪里又可以潜意识的想浏览者暗示这是在某个网站,URL链接文字的颜色统一用了一种普蓝色这种颜色不刺眼而且可以很好的和正文区分。就像是苹果系统一样,在每个角落都有同一种视觉形象的影子,精细到每一个小ico每一个边框的颜色形式,都要重新设计、定位。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ︿ 右边的侧边栏区域的透明处理是一种在视觉形式上的出破和尝试,这样做的目的是在不干扰侧边栏内信息传达的准确性的基础上让用户的注意力更加集中在左边的正文区域中。当左右两栏形式和视觉强度相同时很容易干扰用户,如果两边颜色不同,却又有主次层级之分,那么用户就会把注意力放到重要的一边所以我尝试的把右边的侧边栏背景减淡同正文拉开等级差异。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
︿ 剩下的一些杂项的小问题:首先页面这个标签就不知道是何意。页面侧边栏不要放和主导航一样的链接,容易产生误解。最近评论这个栏目的作用可能对你查看信息回复的情况有用,但对用户来讲上面的所有信息都没有任何意义,所以请不要放到页面当中,可以尝试放到关于你的页面之中。避免回行,回行对整体的破坏性是很大的,一个板式是靠留白来展示给用户的,但六百破坏了真个页面的留白的秩序,适当的改变文章题目的字数是最好的解决方法。 说到这里我想起了一个校内中的天秤座的分享,他处理的信息总是对内容进行编辑,然后在上传,在本人的屏幕正好可以看到所有的信息,不用点击更多,虽然习惯了点击更多开blank查看页面,但可以通过一次便改变用户的习惯,用户可以通过你这个方便的特点来记得你。在这个小小的改动上积累了很好的体验。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ︿每个间距之间的长度要有明确的标准、成比例关系,这样可以有助于页面的复制和在生成,这一步是页面整体视觉形象流程的重要的一步,好的UI设计来自于对每个细节的把控,正式这点点滴滴才使得用户对你的网站产生了一种独特的感受,细节成就人生。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||