必选项:你的网站易于阅读吗?

  当我们设计网站时,我们在想什么?——设计引人注目吗?便于理解吗?有品牌关联吗?……其实最先需要思考的是,文字可以被容易阅读吗?

  微软估值高达340亿美元,拥有着一支由设计师、研究员、程序员、原型设计师、排版员、产品经理、人种学者、作家和脑洞大开思想家组成的庞大团队。即便是这样的公司,依旧被自家花里胡哨的网站首页的纷繁复杂折腾着。

微软不是特例,“阅读不能”正在成为业界流行病。

  下图所示,既不是出不起设计费的小公司,也不是不起眼的边角内页。偏偏都是极具设计意识的业界大牌,却更加忽视了“易读性”,而选择在首页或重要页面上强行秀设计。

  我发现了三个造成“不易读”的关键要素:

  1.自适应设计

  2.脱离内容的设计

  3.没有考虑文本

  自适应设计

  “图像+文字”的构图方式很难适应不同尺寸的屏幕。图像中的留空和文字线条长度之间有种微妙的平衡关系。想要在静态画面中解决这个问题是不可能的。

  做个原型吧!

  不需要写代码,也不用考虑浏览器兼容,只需要一个简单粗暴快速的原型就可以看到各种尺寸下的效果!

  切实考虑内容

  使用最优图像组合进行设计相对简单。但如果是处理用户生成的或者动态的内容,就得预先设想最糟状况的应对方案。比方说,要在图像上叠加白色文字,可也许有人偏偏选择以白色为主的图像。

不考虑文本

  视觉设计的目的是为了沟通,用把文本和图像结合起来的方式才能更好地传递信息以及讲个动人的故事。选张美图的同时千万不要忽视文本内容,不考虑用户阅读体验而只顾设计的都是耍流氓、都是无效沟通!

  本文来自翻译,原作者:Colm Roche

时间: 2024-10-14 18:00:18

必选项:你的网站易于阅读吗?的相关文章

【铜】第135篇 一对一视频录制(二)及必填项红色星标及隐藏index.php及必选项不能为空 周一

关键词:一对一视频录制, 必填项红色星标, 隐藏index.php, 必选项不能为空 一.一对一视频录制 1.1 需要做的 二.我的网站 2.1 必填项红色星标 代码如下: <spanstyle="color:red;">*</span> 效果如下: 2.2 隐藏index.php 1)开启mod_rewrite.so LoadModule rewrite_modulemodules/mod_rewrite.so 注:去掉前面的#,重启apache即可. 2)如

it人必进的几大网站

1.chinaunix网址:http://www.chinaunix.net/简介:中国最大的linux/unix技术社区. 2.itpub网址:http://www.itpub.net/ 简介:有名气的IT技术论坛,看看它的alexa排名就知道有多火了,尤其以数据库技术讨论热烈而闻名.ITPUB论坛的前身是建立在smiling的oracle小组. 3.51cto网址:http://www.51cto.com/简介:由国内知名IT门户网站管理团队,获近千万风险投资,于2005年8月正式创立,是国

第五次作业2、请将该code进行代码重构,使之模块化,并易于阅读和维护;

1.请运行下面code,指出其功能: (需附运行结果截图,并用简短文字描述其功能) 显示了人的姓名.年龄 2.请将该code进行代码重构,使之模块化,并易于阅读和维护: 3.观看视频The Expert (Short Comedy Sketch),写出观后感(内容是什么,说明了什么问题,有什么启示),提交到博客! The Expert (Short Comedy Sketch)内容是:一个工程师在一群完全什么技术都不懂的CEO,产品经理和设计师面前…… 说明了什么问题,有什么启示: 看了这个视频

destoon程序中qq号码,手机号,msn必选项实现方法

最近发现好多客户,信息不完全!还是把qq号码,手机号,msn设为必选项比较好!下面以把qq设为必选项为例找到模板 template/default/member/edit.htm 找到 function Dcheck() { if($('truename').value == '') {Tab(0);Dmsg('请填写真实姓名', 'truename');return false;} if($('password').value != '') {if($('cpassword').value =

17个Web前端开发工程师必看的国外网站

Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要,无论是学习新技术,还是寻找免费资源与工具,设计博客都是很不错的去处. 1. Smashing Magazine Smashing Magazine创建于2006年,是最好的设计博客之一,有很多Web设计和开发方面的高质量文章,内容涉及HTML5.CSS.JavaScript.Photoshop.Wordpress.壁纸和网站可用性. 2. Net Tuts Net Tuts是一个高品质的设计博客,发布技术,技巧

CSHOP收货人收货地址信息的省市区改成非必选项

第一步,先修改相关JS文件打开 /js/shopping_flow.js 文件将下面JS代码删除掉 if (frm.elements['province'] && frm.elements['province'].value == 0 && frm.elements['province'].length > 1)              {                err = true;                msg.push(province_not

怎么样做一个易于推广的响应式网站

做一个响应式网站的目的是什么?为什么现在那么多站长.企业建站.个人建站选择建设响应式网站?对于为什么要做响应式网站,可以简单的说一方面是为了实现更精致的网站展现方式,另一方面就是为了更好的宣传网站.推广网站.大家都知道,响应式网站相比一般的传统网站要更易于推广,但并不是说做一个响应式网站就能够马上实现推广优化效果,要想做一个易于推广的H5响应式网站,需要在响应式网站建设过程中一步步搭建好. 一个响应式网站建设并不难,只需要使用建站宝盒响应式建站系统便能制作出一个H5响应式网站,相比传统的响应式建

最齐全的网站元数据meta标签的含义和用法

随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到如今Windows 7.Windows 8的IE9.IE10.IE11,对Html5的支持越来越好,html meta标签的功能作用也越来越强大. 首先,先说一下最初产生的一些常用meta标签.从Meta标签的定义说起. Meta标签是HTML语言中HEAD区的一个辅助性标签,它位于HTML文档头部的<head>标记 和<title>标记之间,它提供用户不可见的信息.META标

提高网站设计可用性(有效性)的10条原则

决定一个网站成败命运的,不是视觉设计,而是设计的可用性和有效性.访问网页的用户们握着鼠标,决定一切,"以用户为中心"已然是成功网站的标准设计方向.总之,用户不用的功能,就不该存在. 我们并不打算重复探讨操作细节(比如:"搜索工具栏"应当怎么放置),相反,我们的目光将集中在网站有效设计的核心原则.启发式方法和入门上.这些如果能够使用得当,可以催产出更丰富的设计作品,且使呈现的信息更容易被获取. 网页设计有效性原则 为了能够合理利用这些原则,我们首先需要理解用户是怎样与