everybody loves 简书

本文写于看完《瞬间之美》的前三部分,即如何让用户在30秒内爱上这个网页。主要将书中提到的知识进行使用分析。

决定一个用户是否停留在你的网页上继续浏览和使用,也许远比30s的时间要短。事实上我本人基本只会用10s内的时间,进行判断出这个网页到底是不是值得我停留。时间并不重要,只能说明你必须以最快,更快的方式让用户喜欢上你的网页。

简书算是国内一眼看上去比较让人喜欢的网站了,清爽的设计风格,简洁的排版。那么就来说说它。

总体风格:Metro UI

Metro,又或者我们叫它windows 8设计风格,起源于瑞士国际主义设计,纯粹的平面设计风格,哈哈二次元的设计风格(just joking)。可以说,相当于windows上的扁平化设计。这是一种与现实世界泾渭分明的设计风格。

我们对Metro的第一印象大概会是windows 8的那一个个令人心烦的色块。Metro风格的特点是去情感化(当然这就变得有点不近人情)、严格的网格式排布。对质感作最大限度的抽象化(这点与IOS的拟物化设计是两个极端),高光、阴影这些元素全部舍弃。以表现内容为主要目的和设计方向,并且这个内容是流动的。

Metro非常适合那些以文字为主要表现内容的网站、app。因为它们要做的事,往往就是让阅读内容这件事简化、再简化。

简书作为一个阅读文字、写作文字的网站,它主要承载的就是内容。因此它采用Metro UI的设计是合适且聪明的。首页上左边一列是导航,右边信息的部分看不到任何的图片,中间一张照片将两部分分隔开。非常简洁漂亮,谁说你一开始用它的原因,不包括它带给你的modern感呢?

引导用户视线,注册按钮在哪里?

古腾堡图表显示,用户的浏览习惯是从上到下,从左到右。因此用户在粗略扫描网页上的内容时,视线会沿着从左上到右下的对角线。因此左下角和右上角是视觉落盲点。这又叫做对角线平衡,如下图。


从简书首页导航上的按钮,到图片,再到右边大块的文本列表区域。简书使用了砖红色,将这三部分连成一个对角线,刚好是用户扫描一眼会看到的路径。

那么来看看这条路径的内容:导航、文章内容。

作为一个网站的首页,我想吸引人注册是最首先要考虑的。而简书的首页,你需要找好一会儿才能看见注册的地方。如果换了我,一定会把注册按钮(即写文章的按钮,这个导航的名字下个部分内容再讨论)放在对角线上。在用户的视线里多刷几次脸熟,总是会增加用户的注册概率的不是吗。我也忽然发现,从2013年我第一次关注简书开始,居然耗时两年多我都没有注册这个网站。也许这是其中一个原因。

导航:可以更精简

合理的导航组织和布局,是引导用户找到他们想要东西的非常关键的一部。

来做个游戏,数数看你能在简书的首页上找到多少个“写文章”的按钮(当然,我指的是已经登录的情况下)。

答案是三个。一共有3个写文章按钮,我的主页、我的收藏、提醒、简信、设置、登出分别都是2个。值得注意的是,后五个的排列顺序是以相同的方式出现在左下和右上的。——so what are you trying to express?

信息量太大我看不懂啊……

我的主页、我的收藏、提醒、简信,这四个功能属于常用功能。放在一级页面的便捷性显而易见,在右上角的二级菜单也重复一次有点冗余了,这和简书本身的极简风格不符。

显示模式本来应该是设置的一部分,其中字体的设置、简繁的切换应该不是常用功能。那么唯一让它留在外面的理由应该就是那个日夜间模式的切换了。但你完全可以做成一个更加便捷的按钮——如果这个功能使用得这么频繁的话。

登出功能,应该不是网页希望用户做的一个操作。那么放在右上角的二级菜单里面就应该够了。

再看写文章功能。这个功能页面上有三处入口,分别是左上,图片底部、右上的二级菜单。1.同一个功能,分别叫做“写文章”“提笔写篇文章”,一个页面上就缺乏一致性了。2.提笔写篇文章,这几个字并不会让你的按钮变得更加文(zhuang)艺(bi),反而显得很啰嗦。3.右上角二级菜单的写文章按钮我想不出来使用情景,因此质疑它的存在意义。

简书的导航,我看起来就像,生怕用户不知道这个导航在哪里一样。233333

标签云&标签

《瞬间之美》里面提到了标签云的使用。即根据热度让标签像不同大小的云朵一样显示出来。


简书的标签也是大小不一的,但我想,那只是因为字数长短不一样吧。

那么简书有没有必要使用标签云呢?

标签云的好处,是能让用户对于这个系统中其他用户的使用有一个大概的估量。有时候你得承认,这对人云亦云的用户来说是很贴心的。标签云的坏处,是需要一个养成系统,用于养成用户潜意识中那些大的标签表示的是热度高的标签。也许你会说,那么在标签云下面加一行字:the bigger, the hotter.不就好了吗?得了吧……那一点都不性感。

你总是需要知道标签云中那些大的标签,为什么是大的。而强迫用户进行思考,在任何情况下都不应该。

简书首页,今日看点下方有一些标签。这些标签是用来分类下方的文章列表的。这个情况下用户并不需要知道这些标签的热度(我反而比较想知道为什么这些标签会出现在我的首页上,我并没有关注过它们!)

不同tab页下的展现形式不统一?

图1.1,没有文章摘要,多了左侧的圆圈序号。

图1.2,有文章摘要,没有左侧的圆圈序号。

我并不能理解这样设计的意图。还有待进一步研究。


1.1


1.2

更多简书细节的问题。

用了简书写一篇文章,发现交互上的问题还是有的。当然也可能是我太low,比如我至今没找到如何将置为标题的文字重新变成正文。比如书写超过一页之后我几乎每三行就要动一下鼠标来拖动页面。其他的页面也是。留待进一步学习之后进行研究。

后记。

看别人的网页总是轻松,但自己做的总是糟糕的一塌糊涂。前阵子总有用户告诉我,找不到新增的入口,找不到这个,找不到那个。下次一定要在用户发现问题之前,自己先发现才好。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,423评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,705评论 22 664
  • 人脉不是你认识的人有多少个,而是有多少人认识你,关键在于认识你的人之中有多少人认可你,你的存在对于他人有意义,他人...
    c86c7e08cf1a阅读 297评论 0 1
  • 忘尘谷 为了一场相遇,不顾路途遥远,只为遇见你。 漫漫滨河东路,长长又长长;一湍沂河水,汤汤复汤汤。 愿来处没有终...
    心若芷兰阅读 597评论 1 4