手机网站上信息的有效传达

2016-02-17 04:00 10 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享手机网站上信息的有效传达教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - 平面设计 】

让用户读懂你的网站是所有事情的开始,为了在狭小的手机网站上尽可能有效的传达信息,本文的图片是我用手机一张张截图的,浏览器为UCweb 7,手机为Sony Ericsson M608.

让用户读懂你的网站是所有事情的开始,为了在狭小的手机网站上尽可能有效的传达信息,我总结了这么几条.

本文的图片是我用手机一张张截图的,浏览器为UCweb 7,手机为Sony Ericsson M608.

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

1. 清楚的文字间隔

大小合适的文字间隔可以让用户在阅读内容的时候不至于太累,也可以有效的避免眼花。让你的用户用很少的精力领会你的意图,并进行下一步的操作。

手机网站上信息的有效传达,PS教程,图老师教程网

2. 舒服的文字颜色

大多数人使用手机上网时都是处于一个不安稳的环境,如公车上,商场里,甚至走路的时候,舒服的文字颜色可以缓解用户的视疲劳,不至于让他们因为眼睛太累而把手机塞进兜里。

手机网站上信息的有效传达,PS教程,图老师教程网

3. 使用不同的文字背景色

使用和文字颜色反差大的背景色可以帮助用户更容易的阅读文字内容。另外背景色也可以让特定的内容和其他内容区分开。如果想在小屏幕上展现不同种类的信息,不同的背景色将是一个很好用的方法。

手机网站上信息的有效传达,PS教程,图老师教程网

手机网站上信息的有效传达,PS教程,图老师教程网

左边的网站用背景色突出了重点新闻,右边的网站则用背景色把栏目和内容分开。

4. 使用不同大小的文字

重要的内容可以用大字体。这在手机网站上依然有效。并且因为手机网页通常都很小,所以适当的大字体更是会首先抓住用户的注意力。

手机网站上信息的有效传达,PS教程,图老师教程网

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

5. 使用不同的文字颜色

不同的文字颜色是区别显示信息的另外一个方法。在很少使用图片的手机网站上,不同的文字颜色也可以增加网站的趣味性。

手机网站上信息的有效传达,PS教程,图老师教程网

6. 控制信息量

手机屏幕很小,所以不要试图把一切东西都塞在一页。尽可能的把最重要的展示出来,剩下的可以让用户选择是否点击继续查看。

手机网站上信息的有效传达,PS教程,图老师教程网

看上图这个网站,非要在一个类别里放这么多的新闻吗?

7. 不要忘记图片注释

好多用户使用手机上网时都会选择屏蔽图片,这个时候良好的图片注释就不会让用户觉得网站粗糙。相反,如果只是显示图片二字,会增加用户对网站的厌烦感。

手机网站上信息的有效传达,PS教程,图老师教程网

手机网站上信息的有效传达,PS教程,图老师教程网

左边这个网站很好的使用了图片的注释,LOGO图片变成文字手机新浪网一样看起来不错。而右边的这个就比较尴尬。

8. 清楚的导航

越是空间狭小,就越需要清楚的导航。最好的结果是用户知道他们在什么地方,知道如何去另外一个地方。

手机网站上信息的有效传达,PS教程,图老师教程网

左边第一个的网站,导航和正文混在了一起,看起来比较眼晕。

手机网站上信息的有效传达,PS教程,图老师教程网

手机网站上信息的有效传达,PS教程,图老师教程网

这两个则没有这样的问题,用不同的方式达到了同样的分隔导航栏的目的。

来源:http://www.tulaoshi.com/n/20160217/1578295.html

延伸阅读
互联网信息时代,很多内容为主的网站都信息过载,这导致了载入速度过慢。电商网站如此,新闻类网站也是如此,而一些设计师作品集网站或者设计机构的网站也是如此,老实说,作为设计师,应该避免信息过载现象的出现。而一旦你掌握这些技巧,那么你离高薪酬的资深设计师也就不远咯。 内容主导的页面布局会自然而然的繁杂、问题多,设计这种网站...
当你第一次打开一款应用的时候常常会看到精美的引导页设计,它们在你未使用产品之前提前告知你产品的主要功能与特点,第一次印象的好坏会极大地影响到后续的产品使用体验。因此各个公司都在努力将这几个页面设计好,从一开始就引人入胜。那接下来我跟大家一起来探讨关于引导页的设计。 一、 目的区分根据引导页的目的、出发点不同,可以将...
标签: 电脑入门
方法/步骤 手机能正常访问而电脑上却不能正常访问的网站,往往有很多情况,最常见的一类是下图1所示的例子,在浏览器地址栏输入网址按回车后,不是进入网站,却是马上弹出下载未知文件的提示,有的人被吓蒙了,以为网站有毒有马,马上关闭下载提示框和页面,而有的人则淡定地把下载提示里的查找、保存和取消都试一遍,结果都是无法进入该网站...
目前,移动浏览功能不断普及提高,开始优化你的网站以更好地适应移动平台和它的局限性将是你的第一要务。有很多简单的方法可以提高你的移动浏览网站,同时又不过多的改动你的网站,本文探讨其中最流行且可以对可用性产生巨大的影响的8个。 流式布局 让您的网站液体宽度布局是使您的网站的朝着对移动设备友好的重要一步。它不仅摒弃了你的...
互联网信息时代,很多内容为主的网站都信息过载,这导致了载入速度过慢。电商网站如此,新闻类网站也是如此,而一些设计师作品集网站或者设计机构的网站也是如此,老实说,作为设计师,应该避免信息过载现象的出现。而一旦你掌握这些技巧,那么你离高薪酬的资深设计师也就不远咯。 内容主导的页面布局会自然而然的繁杂、问题多,设计这种网站...

经验教程

316

收藏

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