网页设计中建立良好的视觉层级,好文!

2013-2-10 蓝蓝 交互设计及用户体验

 

随着互联网信息爆炸式增长,用户浏览单个网页时,并不像我们想象的如阅读文章般从左到右、从上倒下逐一查看,为什么?

一、 视觉层级为什么重要

左侧是设计师期望用户的浏览方式,右侧为用户实际的浏览方式—摘自《Don’t make me think》

用户来到一个网站有他自己特定的目标,如阅读新闻、购物、查看新消息,然而信息量太大,逐一查看需要大量时间,这就要求网站能抓住主流用户特征,将重点推送给他,用户找到自己的目标或感兴趣的点,才有可能继续浏览或产生下一步动作,否则就会离开。

用户时间有限加上互联网信息量巨大,这两项原因正是考验视觉设计师要建立良好的视觉层级呈现给用户,帮助用户快速找到目标的功力。

总结一下,建立有效的视觉层级主要从以下四个方面着手:

1、简约: 有选择的展现信息,让用户在有限的信息中发现重点

2、组织: 预先对信息进行科学的分类,整理好优先级,可以得到更好的传播效果

3、呈现: 多种表现方法结合,呈现最好的视觉层级效果,这个点细化后有很多可挖,这里总结了几个点,欢迎继续哈

4、引导: 遵循用户习惯,同时给予适当的引导推荐

阅读全文>>

标签: 如何建立视觉层级 网页设计视觉分层次 视觉层级为什么重要 建立良好视觉层级的作用 表达信息之间的关系 围绕用户行为设计层次

评论(13) 浏览(1608)

怎样的设计能给人留下深刻印象?

2013-2-9 蓝蓝 交互设计及用户体验

 怎样的设计能给人留下深刻印象?

  名人效应 (借助名人或明星效应,产生不言而喻的说服力)

  每人内心都有自己仰慕或效仿的对象,而且有一种想尽可能地向他靠近的心理欲求,从而获得心理上的满足。在选择人物形象时必须要与产品的品格相吻合、使用户快速理解产品传递的特点和价值,比如我们以往的设计作品中经常会使用到马云的形象,他在互联网具有极高的话语权,选择用他的形象来推广产品能产生不可言喻的说服力,当然你不能滥用。

  时势结合 (紧随潮流,激发思想和感情上的共鸣)

  结合当前社会事件如钓鱼岛、奥运会、中秋节、中国好声音等等,或当下流行的语言词汇如屌丝、高富帅、白富美等等,紧随潮流的事物反应当下的社会形态,潜移默化的感染到用户的思想或感情,产生震撼和共鸣。下面的例子就是结合现在最流行最热门的节目“中国好声音”。

阅读全文>>

标签: 怎样的设计能给人留下深刻印象 设计的几种方法 好设计的原则 设计的表现手法 设计如何讲故事

评论(3) 浏览(1328)

看看国外知名设计师的草稿和成品对比

2013-2-8 蓝蓝 网站欣赏

大多数的设计师都习惯在纸上开始自己的工作,假如你也是设计师,想必手上也有一两本笔记本,上面随手记了一些漂亮的草稿吧。不管你的草稿有多草(糙),都是值得自豪的,为什么不亮出来给别人看看呢?

  别的设计师的草稿都是什么样子的呢?

  Buzz Usborne, Campaign Monitor (活动监测)

  先来看看 Buzz 的设计草稿

 

  草稿里的对角线和最终成品的对角钱相呼应,Buzz 的草稿并不强调细节,而是注意线条和指引的清晰程度。

  Buzz 的成品

阅读全文>>

标签: 设计师的草稿与成品 设计师草图 网页设计过程

评论(22) 浏览(1284)

四两拨千斤的网页设计产品经理工作小工具分享!

2013-2-7 蓝蓝 交互设计及用户体验

本篇的主题是分享一些四两拨千斤的小工具。 没有下面的软件的同学,一定会喜欢!已经有的同学,就可以飘走了!~

注意,所有小工具都是绿色的!绿色意味着你不用安装,体积极小,拷贝一份即可使用。
为什么要推荐?这么多年来,这些工具一直陪伴我的工作,并且已经私下里推荐给很多同学,用过的人都叫好。

NO.1 截图利器之FSCapture
  • 推荐理由: 绿色、轻量+强大截图功能,装机必备之利器
  • 应用场景: 截图啊!做帮助文档啊!插图啊!太多了!比如下图就是用此用具截图并编辑的:

阅读全文>>

标签: 截图利器之FSCapture 取色利器之colorpix 任务管理之Wunderlist 画图之在线工具 excel项目管理模板

评论(5) 浏览(1348)

用户体验设计答疑对话(半吊子和纯外行)

2013-2-6 蓝蓝 交互设计及用户体验

[总结]:在用户的视角来看,我们也希望他看到的都是最简单最愉悦的一面。作为客户培训师,你不需要知道产品数据在我们后台是存储在什么服务器的。用户搜索产品时,也更加不需要了解一个检索词是经过了多少词解析判断计算,跑了几台服务器,最终把结果呈现给他的。但是作为工作人员,我们得了解需要怎么做,才能够把最简单最愉悦的结果呈现出来。(Heidi注:如图5所示)

P1030876

图5:简明网站产品建设流程图

这个图呈现的流程,依赖于多个部门的通力合作。从战略层高瞻远瞩的判断、从产品经理对于市场的分析以及功能、内容的规划、描述,到用户体验团队,开发和测试团队的全力配合,而网站产生后,还要依赖于SEO、市场营销、销售和客服的工作。

成功的网站,一定是多个部门一起围绕相同目标运作的结果,但是其中一个环节失败,则可能会造成全盘皆输。

本文虽然篇幅已经很长,但是涉及到具体的流程、方法,都只能简单带过,希望大家要记住这是对话的场景,不要以偏概全哦。
你对他提出的问题,想如何回答呢?如果你有问题,质疑,鼓励……欢迎交流。

阅读全文>>

标签: 用户体验设计答疑对话 了解用户体验设计部 UED平时都是怎么工作的 好的设计方案应该能够满足多个维度的评审标准 简明网站产品建设流程图

评论(0) 浏览(1543)

高效工作的信息搜集及管理方法,如何从搜索引擎找东西?

2013-2-5 蓝蓝 交互设计及用户体验

图1:信息搜集及整理术循环图
本文经授权刊载于《程序员》杂志2012年12月期刊。请勿转载作为商业用途。
其他转载请注明出处及保留原文。
关注我请点击:http://weibo.com/heidixie

 
写在前面
几个月前,团队邀我做次内部的分享,主题是如何有效搜索信息。这是因为平时工作中,我经常会分享一些专业学习文档,而这些文档的出现往往很及时,回应一些我们自己项目的困惑,所以大家会好奇我如何及时找得到那么专业且对口的参考资料。

 
这些资料有些来自网络搜索,有些却是来自我的“个人资料库”,它分门别类,容易检索,所以很轻易就能够翻出来示人。所以后来,这次分享便从“搜索术”,扩大为如何获取、整理各种信息的技能。

 
这原来我认为是常识的东西,却在简单分享后得到好评。受到鼓励之余,我也明白了并不是所有人都明白有效的信息搜集及整理有多么重要,也并不是所有人,都掌握了行之有效的方法和技巧。故整理成文,做抛砖引玉之用。

 
一.信息搜集及整理循环图

 

如上图1所示,我认为“信息搜集及整理术”会包含三个关键阶段:
  • 搜索:“找信息”——用各种搜索渠道快速找到所需的精准信息。
  • 集成:“存信息”——简单来说,就是把你找到的信息,定制成为个人资料库,按照自定义的主题,分类存储在自己很方便访问的地方。
  • 整理:“理信息”——信息单纯集成而不加整理,时间长了就会杂乱不堪,所以才会出现很多人自己的硬盘资料库已经塞满了,每当需要什么资料的时候,还是需要去搜索。定期对所集成的信息进行整理(归类,去重,留精,加可供搜索的标签等等),能够显著提升信息搜索效率。

阅读全文>>

标签: 高效工作的信息搜集及管理方法 建立主题关键词 如何从搜索引擎快找东西

评论(1) 浏览(1447)

如何写一份交互说明文档

2013-2-4 蓝蓝 交互设计及用户体验

离开交互圈已经有段时间了。但由于博客还在,还是能够偶尔收到一些邮件,上周有位同学问我:我在求职,我看到很多招聘说明上需要交互设计师编写界面交互设计文档 ,请问界面交互设计文档是什么文档?怎么编写呢


这让我想起来2009年自己在项目里也大力推行过交互说明文档(在下文中,简称为DRD),格式倒没什么限制,交互设计师自己写到界面上也行,单独文档成文也行,总之就是让交互设计师能够将界面承载不了的信息通过文档沉淀下来,降低项目里的沟通成本和风险。今天整理电脑, 翻出以前的PPT,分享之。

这将涉及到几个问题:
一. 什么是交互说明文档(DRD)?

 
所谓DRD即是用来承载交互说明,并交付给前端、测试以及开发工程师参考的文档。

 
在项目中,交互设计师的主要产出物可能依次是:site map,page flow,wireframes。有的大型项目前期,交互设计师有可能还会产出用户需求分析文档(与PD产出的市场需求文档不一样的是,URD更多侧重于对目标用户的需求分析)。

 
DRD则很少有人专门撰写。如果需要对交互设计进行说明,聪明的交互设计师往往会直接标注在线框图里,或者在项目中不断和前端工程师和开发工程师口口相传,反复验收,不断迭代修改来确保所有的交互设计意图最终得以呈现。

二. 为什么要写?

 
DRD非项目必需环节,一般情况下也不会为交互设计师专门留出相应的时间预估。没有这份文档,项目也会继续,但是可能项目会为此承担不必要的沟通成本和时间成本。严重的话,项目的质量也会受到影响。所以写与不写,交互设计师需要做把握,时间被统一包含在“线框图”环节内——如果你要写,请在评估时预留1-2天的时间。

 
那么,结合我过去的经历,谈一下此文档的必要性。

 
下图是一个产品开发项目基本的流程。

 
敏捷开发意味着很多不同角色的流程需要并行操作。如果等到产品经理的FRD已经全部敲定,交互设计师再开始去画线框图,固然会减少沟通成本和返工风险,但是同时意味着交互设计师的很多想法不被采纳。如果产品经理再强一些,他甚至会在FRD里连原始的DEMO也一并绘制出来了,功能性的需求和界面交互的需求有时无法区分太清楚——比如他会在FRD里直接要求每页条目40条,超过40条即分页。而交互设计师可能会认为像蘑菇街那样不断装载出足够长的页面会更亲和……所以,我们希望是和产品经理同时开始工作,在术业有专攻的时候相互补充。

 
同样,开发工程师也希望及早介入需求,在FRD并未确认的时候就了解需求,进而将商业需求和功能需求转化为开发工程师看得明白的开发需求清单(这个清单,大部分叫做UC,即USE CASE),当这份清单由工程师需求分析师——在过去,这个角色被叫简称为RA,但是目前已经取消此专门的职位,而是由开发工程师代表担纲此环节工作,为了便于描述,在此文里,我仍然将做这件事情的人称为RA——交付给具体的执行工程师后,执行工程师基本上可以当作一条条的checklist开始高效工作,而不必再思考商业逻辑和需求。同样,测试工程师也需要编写具体的文档去指导很多测试人员在开发后高效测试,这也是基于UC和FRD去撰写的。

 

阅读全文>>

标签: 如何写一份交互说明文档

评论(2) 浏览(1470)

绿色系的质感ui局部细节设计欣赏

2013-2-3 蓝蓝 ui界面欣赏

绿色系的质感ui局部细节设计欣赏2

阅读全文>>

标签: ui细节欣赏 绿色质感ui设计欣赏

评论(16) 浏览(1533)

字体的排版设计

2013-2-2 蓝蓝 平面设计

作为设计师的我们,每天都在与字体打交道,我们常常希望能很好的使用他们,为设计加油添彩。我们常常纳闷,电脑里这么多的字体,要用哪一个?文字有这么多,怎样排版才能表达内心深处的思想?

常常说,艺术是相通的。将文字排版与音乐结合起来,用视觉化的音乐和文字排版相结合,会让我们的字体排版更容易组合,更能体现我们的设计情感。

将普通的文字赋予音乐的艺术形式,将文字排版赋予听觉的美感和视觉的美妙,更容易传递信息,表达其深层次的涵义。

当音乐响起时,电脑播放器里变化雀跃的频谱图,音响喇叭发生震动产生的声波,跳动的五线谱和乐器发生引起的变化图(A-01),都是我们体现情感的视觉化形式。

阅读全文>>

标签: 字体排版 字体排版设计

评论(11) 浏览(1378)

黑色系的质感ui局部细节设计欣赏

2013-2-1 蓝蓝 ui界面欣赏

黑色系的质感ui局部细节设计欣赏3

阅读全文>>

标签: 黑色系的质感ui局部细节设计欣赏 黑色系ui细节欣赏

评论(0) 浏览(1291)

Powered by emlog 京ICP备12006971号-1 sitemap