设计理论:界面内容优化的层次

2016-02-19 13:25 2 1 收藏

今天图老师小编给大家精心推荐个设计理论:界面内容优化的层次教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - Web开发 】

所谓产品其实最终展现在用户面前的只是界面而已,所谓界面绝大多数时候只包括两个部分:图片、文字。
重视界面上的每一个像素和每一个文字是UED的基本素质,关于如何设计好界面上的文字(一般在UED里面我们把这个职位叫做内容优化)我以前写过创业团队的界面文字优化和用户在每个情景中的角色感,这一期的话题中其他伙伴也说到了很多。

这个话题讨论到这里,已经让很多人意识到了界面上文字的重要性:界面的文字就好像一个人的谈吐,文字给用户的感觉不单单只是一个信息的传达,他还关乎用户对于产品的情感印象和产品气质的理解。

那么,我应该说点什么呢?在今天写这个话题之前我就一直在思考:能否系统化的把内容优化像体验一样分层次的理解?

.

1,界面上的文字应该做到:清楚而准确的向用户传达信息
其实这是内容优化的最基本要求,本应该是所有产品都可以做到的。但往往是越熟练的人越容易在这里出现问题。常见表现:过份的向非专业用户展示专业词汇、信息提示本身误导了用户。

比如,某视频网站突然蹦出来一个bps超出,链接失败。(查了资料我才明白bps大概是每秒链接数的意思)
比如,有些网站用户没有注册也去登录的时候反馈提示为密码错误。其实直接提示没有此用户,然后给个链接注册此用户,你会发现转化率相当高,注册量有了用户也方便了。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

2,界面上的文字应该便于用户阅读并快速理解其含义
最常见的问题表现是:语言过于罗嗦、信息排列混乱。

比如,某门户网站在注册blog的时,您的登录名旁边这么写辅助说明:4-16个字符(包括4、16),英文小写、汉字、数字、下划线,不支持空格,不支持全角英文,不支持纯数字,不能使用下划线开头和结尾。。(大致推算了一下,一个IQ小于200的普通用户如果认真读完并完整理解这句话的意思需要近1分钟时间)
比如,另一门户的blog和他旗下的校友录网站,东边一个下划线、西边一个icon加文字、南边一个按钮加文字、北边一个红色、中间还有一个红色加粗。我进去之后真不知道什么地方可以点什么地方不可以点,什么地方能点什么地方不能点
再比如,某电子邮件服务在注册的时候这样排列:用户名:___、密码:___、密码强度:[][][]、重复密码:___。吓的我还以为可以自定义密码强度。。。

3,整个产品不同位置的文字应该统一。大家都讲普通话,不能一会中国话一会外国文。
这是一个最简单的问题,却是大部分网站都未能避免的问题。(特别是在中文网站,大概是因为中文说法太多了)
比如,作一个IM软件,一开始是添加好友,接下来联系人列表,然后又是不在线的朋友;一开始是注册用户名、然后是登录ID、还有您的账户、管理帐号、

4,界面上的文字应该具备该产品需要传达给用户的气质

这里往往遇到的是怎么做的问题:怎么确定产品要表达什么样的气质?怎么确定什么样的语言风格才算是表达了这样的气质?
在稍微大型的企业我们一般有很多种方法可以做到,比如找很多用户让他们说出他们需要的、比如通过情绪板、比如通过颜色分析等等。
但在创业公司我一般建议大家实用一点:
1N个很了解产品定位的人坐到一起,每人一个贴纸写下来一个你认为可以描述该产品的句子或者事物;
2把所有人的描述拿出来大家讨论,把每一个用二维分析的方式摆出来,最终得到一个大家都认可的结果就是这个产品应该表达的气质;
3每人N个贴纸,根据刚才得到的结果,结合自己产品的环境写下来你认为要表达这种气质需要什么样风格的语言;
4用第2点中同样的方法得到一个统一的结果,(比如:严肃、简练、..)
5安排一个专门的人写一份简单的指南,描述这个结果具体执行时一些需要注意的常见问题和原则。(比如:既定事实不再重复、不用反问语句提问用户、即时说明文字不得超过20字、)

5,文字的视觉设计应该完整的融入整个产品视觉中。
很多视觉设计师喜欢把文字融入到界面的造型中去,得到非常棒的视觉效果,这个很值得学习。
从最基础来说,我们的文字在界面上和图形一样应该有主次有深浅,关于这个部分潇潇同学已经有了很好的表述,我只补充一个例子:

图片网站本身应该表现的是图,文字只是其辅助信息。
flickr在个人首页里每个图片下面都有四行的文字,但我从未感觉到他碍眼或者多余,因为flickr用的是很柔和的粉红和几乎可以让我第一视觉点忽视掉的灰色;
而yupoo在个人首页里每个图片下面只有三行文字,可每一个我都觉得他们扎眼,因为yupoo用了重灰色粗体、绿色粗体、重灰色、绿色四种表现方式,而且字体都还不一样。

6,尽量让文字自身可以起到推销产品的作用,而且推销的不只是产品气质
文字其实可以像图形设计一样在情感上给用户以触动,从而积极的达到对于产品的推销。
比如,很多人已经把注册改成了立即注册、马上注册;
比如,baidu.com的更多页面最上面以前是推荐使用后来改成了试试看,虽然只是少了一个字,但给用户的感受和尝试欲望马上就很不一样;
比如,某电子商务网站会在注册要完成那里说:太好了,你还需一步就能成为我们的注册会员
比如,

.
.

ps:
关于内容优化,《交互设计》和《Designing web usability》两本书都简单的提到了一些类似准确传达信息、不要罗嗦、不要多余、文字要统一、要符合产品风格的话,但说的都很浅,而且言

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)语中能察觉到作者并未想深入表达,或者他们本身也确实没有很深入的研究。

界面上的文字看似是一个很细小的东西,实际上他蕴藏着很多的价值并且在潜移默化为产品带来好的或者不好的利益。中国人说察言观色,我想言语的表达对于中国用户的触动应该会更加的明显。国外现在也还没有在内容优化上非常全面和深入理论知识,可能也是因为他们的语言并没有中国这样博大精深(或者说多变)。
所以,研究和发挥好界面上的文字对于产品的价值也许更适合也更值得在中国做。这里有不小的空白的空间,值得我们发挥。
共勉。

来源:https://www.tulaoshi.com/n/20160219/1604176.html

延伸阅读
标签: 设计
画册设计的元素 1.概念元素,所谓概念元素是那些不实际存在的,不可见的,但人们的意识又能感觉到的东西。例如我们看到尖角的图形,感到上面有点,物体的轮廓上有边缘线。概念元素包括:点、线、面。 2.视觉元素:概念元素不在实际的设计中加以体现,它将是没有意义的。概念元素通常是通过视觉元素体现的,视觉元素包括图形的大小、形状、色...
我们已经讲解完网页设计的对齐、重复、对比准则,现在回顾一下。 对齐可以使网页整洁、有规划。重复可以增强网页设计元素的视觉联系。对比可以区分网页内容并突出重点,引起注意。 今天开始讲述相似:相似是将网页中相同的内容打组。通过运用相似准则,访客很容易清楚网页中哪些内容是同一类的。不同间隔空间指示了网页内容之间不同的相似度。 ...
1.先看业余的设计 在讲解之前让我们先看一个没有用到网页设计制作四个准则的页面,我们称之为业余设计。 在这个设计里面,各种信息被杂乱地放置在了一起。这是一个普通的网页布局,有头部、尾部,内容分为两个栏,但是各个栏目布置得很随意,没有目的性。文字是居中对齐的。整体看属业余水准。 2.应用对齐准则 在随后的教程中,我都...
图书封面设计是一项非常有学问的工作,希望下面提供的20种设计理论能为封面设计者带来一些新的视角。 1. 面部理论 研究显示,人们在一生中会花费48.6%的时间在对面部表情进行解码上。因此,对于图书潜在消费者来说,最具有吸引力的地方就是熟悉的面孔。尼克•霍恩比的图书封面就利用磁带描绘了一个面部形象。 2. 联系理论 人类会...
本文从零开始讲解如何设计一张呈锯齿形的折叠单张,下面这个折叠单张就是最终成果,不仅显得富吸引力,而且也很有趣。 这种呈锯齿形的单张是我们最喜欢的一种排版格式,因为你只需要一点改变,就显得与众不同,甚至在用桌面打印机输出时也一样胜任自如。将一张标准的8.5×14(英寸) 纸张(相当于216×356 mm )水平摆放,...

经验教程

611

收藏

81
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部