网页设计的常见错误 - 首页【译】

原文地址:http://blog-en.tilda.cc/articles-website-design-mistakes

原作者:Nikita Obukhov

转发请注明来源


首页设计的常见错误

1. 页面内容未分成对应的逻辑块

当页面被分成明显的逻辑块时,会更加利于用户阅读。试试设置 120px - 180px 之间的间距,并用不同的背景色块来区分不同的逻辑块。

不同的逻辑块之间只有一些小间距,并且没有用不同的背景色来做区分,增加了用户的阅读成本,且用户很难快速理解某一块文本属于哪个逻辑块;应用了足够大的间距和不同的背景色,高下立判;


2. 页面元素之间的间距不对称

逻辑块应该采用相同对称的间距进行包裹,否则页面会看起来一片混乱,用户不会留心观看每个逻辑块。

(译:简单来说就是会逼死强迫症)

不同的高度除了不对称,还会让用户以为页面主体信息(原文指公司引导页面的公司信息)与顶部相关,而实际上我们设计的每个逻辑块都应该是一样重要的。


3. 太小的块间距导致用户无法将页面内容分成明显的逻辑块

使用至少 120px 以上的间距来分开不同的逻辑块(每个块的上、下边距,即padding)。

太窄的块边距使得块之间靠得太近,页面看起来会有一种窒息感,且用户会困惑于相邻的文字是不是属于同一逻辑块;而足够大的间距则有显而易见的区分能力;


4. 避免图片上的文字与图片的对比度太低

文字与背景的背景的对比应该足够明显,为了让文字层更突出,可以给背景色加上一层遮罩,黑色是常用的遮罩颜色,但也可以试试混上明亮的颜色。

另一个方法是采用明暗对比明显的图片作为背景,并把文案放在暗色部分的顶部。


背景色太亮,文字变得难以阅读
添加了遮罩之后,文字变得很清晰


5. 单个页面用了太多样式

一个页面上应用了太多不同字体和设计风格会有一种不专业感且难以阅读。采用单种字体以及两种字重(如粗体和正常)来避免这种情况。


太多的样式使得页面中的重点很混乱;而采用一种字体、一种颜色、两种字重则使得页面干净、整洁;


6. 色块太窄

不要用色块来强调太窄的页面元素,比如说标题在采用了大字体、粗体和上下间距后已经足够明显了,无需再画蛇添足。当你想突出页面的某一部分的时候,不如直接为标题和内容部分整体添加一个统一的背景色块。


色块会打断页面的连续性,使得标题与文字失去了联系;为标题和内容同时添加背景色则不会有这个问题;


7. 在一个很窄的列里放置太多的文案

当在很窄的列里放置了太多的文案,用户不得不逐行阅读从而增加了阅读成本。砍短啰嗦的文案吧,不然也没人会去仔细看的。


难以阅读的长、多行文字;简短易读的文字;


8. 居中文本过多

文本比较少的时候采用居中排版可以增加美感,但是在文本内容过度的情况下,用户每次读新的一行都要找一下下一行开始的位置。如果你真的有很多内容,可以把它们分成几个块,并用标题来概括它们。


居中的长文本;将居中长文本打散成几个逻辑块;


9. 文案与背景图片的主体部分叠加

避免文案与图片的主体或重要部分重叠,这会使得图片与文字都变得难以辨认。试试改变文案的排版,比如居中、居左、垂直对齐。


标题覆盖了背景中女孩的脸,太多不同的背景细节使得文字难以阅读;图片与文字都变得更加清楚,构图也更好看了;


10. 主次不分

为了分清页面中信息的主次,封面上的字体应该大于或至少跟其他标题的字体大小一样,特别是标题很长的时候。


顶部标题比下文的标题字体还小,下方的标题反而更加突出了;顶部标题大于其他标题,页面显得和谐;


这个原则同样适用于逻辑块里的主次设计。主标题应该是最大的,然后才是次标题。次标题应明显小于主标题,并采用相同的字重,而次标题下面的内容应该采用相对最小的字体大小,这样有助于用户区分信息的重要性。


主标题很明显更重要,但却比次标题的字号还小;主标题足够突出,次标题尽管没有采用大字号,但也足够明显了;


11. 一个逻辑块被切成了2部分

文字后面采用了全屏图片或者滚动图片,看起来像两个相互独立的部分。如果在图片或者滚动图片周围添加一些空白,它们就会自然地变成一个整体,因为这时候能看到它们共同的背景色。


一个全屏的滚动图片看起来从上面的内容中脱离出来成为了一个独立的部分;滚动图片与顶部内容共用了背景,整个页面组织更加合理;


12. 标题过大、过长

超大字体对于短文本很合适,但当句子比较长的时候不妨换用小一点的字号,这样会更利于阅读,且不会占用太多其它元素的空间。


标题太大占据了整个封面,其他元素显得很拥挤;适当缩小标题大小后,页面看起来更舒服,标题与小文本都变得易于阅读;


13. 滥用按钮的边框样式

如果按钮是透明的,那么添加边框是很有必要的,否则就显得没什么道理,只会加重页面的负担且难以理解。


如图;


14. 采用了太多的颜色

一个页面采用过多的颜色显得很混乱,到底哪部分才是重要的?一到两个颜色对于区分主次已经足够了。


太多的颜色显得混乱;一种非文本颜色的使用让页面看起来活泼,且不会使用户分心;


15. 拥挤的导航栏

导航栏对于用户导航和内容查找很有帮助,但是不要过分地填充信息,这反而会让导航栏难用。导航栏上采用 5 - 7 个元素是比较合适的。


导航栏信息过多;


简单的导航栏就能帮用户找到想要的信息;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,837评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,551评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,417评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,448评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,524评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,554评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,569评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,316评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,766评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,077评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,240评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,912评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,560评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,176评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,425评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,114评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,114评论 2 352

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,979评论 3 119
  • 目的:UI设计的目的是为了更好服务用户;能让用户快速完成自己的目标; UI设计的发展趋势:全链路和复合化的设计人才...
    quantre阅读 11,022评论 9 83
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,988评论 25 707
  • 文字是我的秘密洞穴,在这里让我心安,就像妈妈的怀抱,安全舒适,不受侵扰。不管是委屈愤怒,还是甜蜜幸福,在这里都可以...
    茉莉莫阅读 206评论 0 1