这里分享了一个网页界面再设计的简化流程，尽管看起来更像工作之余的练手活计，仍不失参考意义：）
前不久我花了一个周末的时间对网站Hacker News重新进行了设计。这种活儿有段时间没干了，但我明白第一要务就是确立重新设计的基本点（原网站的不足之处）。
这里是Hacker News的原版本: https://news.ycombinator.com/
（把7到28的条目都P没了，不然太占版面了)
我的版本:
进行再设计的流程 :
l 启发式分析
l 用户测试
l 草拟用户界面
l 用PS完善
1.启发式分析
为保准确，我得抛开资深用户的身份，以全新眼光来看它。怎么做呢？
我截了全屏然后放大，从左到右仔细巡一遍，看看它对新手来说是否合理易懂。
启发式从本质上来说就是最佳方案，于是我检验它是否遵照了用户体验设计的准则。以下是我发现的HN的最大问题：
l 系统状态的可见性
用户可能并不清楚主页已经筛出了大多数近期热门内容
l 搜索栏的位置
位于页面最下方
l 分页
没有分页，仅有一个“更多”按钮
l 项目的分组
本来不相干的不同功能的条目被分在了一起
2.用户测试
我对Hacker News的界面流程都了如指掌，因而不知不觉中就会陷入以己度人的误区。为避免惯性思维的误导，我请了一帮毫无使用经验的小伙伴来做实（xiao）验(baishu)。
以下是我们实验里的部分任务：
l 描述所见内容
l 浏览新文章
l 找一篇特定的文章
仅从几个用户操作的过程中，我就发现了一些很有意思的东西，同时也证实了我在启发性分析里的猜想：
内容筛选
小伙伴们选了“New”和“Comments”选项后，似乎搞懂了它们的内容筛选功能。
但在执行“找到最热门内容”的任务时，三分之二的被测者操作并不顺利，试图点击Ask, Jobs 和Submit等其它选项。还有家伙凭直觉点击了Y Combinator的logo并问“是它吗？”（…）
由此我总结出一项痛点：新用户并没意识到主页就荟萃了近期最热门（按点赞排）帖子。
于是我决定亮显筛选目录，把它们从页眉中提取出来并安排进独立的筛选标签。
分页
被测者接到“浏览更多内容”的任务后，一开始盯了“More”按钮好一会儿，不过还是明白了它的用法。
但当他们要返回上一个页面时又出现了迟疑，表示“估计要用到返回按钮吧。”
这就令我确信页面需要分页，而不是一个简单粗暴的“More”。
搜索
小白鼠们在搜索某篇指定文章时同样遇到了困难。有个家伙甚至还动用CTRL+F，说这样才找得到。
直到我给出滚至页面底端的指引，他们才恍然大悟“原来如此！可为啥不放在顶头呢？”看来跟我想到一块儿去了。
提交与登录
另外一条于言语之外透露的给力线索，见于用户面对完全陌生的页面的视线反应。小伙伴们在提交和登录页面上看得尤为费劲。
他们还吐槽：“这页面丑得可以。”
于是我们的看法又一次不谋而合。从主页上赏心悦目的灰橙跌进僵化而功利的惨白，这滋味可不好受。
这回我脑海里又蹦出一个点子：干脆就用弹出窗口解决登录问题，别浪费一个单独页面了。（设计方案在最下边）
3. 起草
点子在手，我便开始绘出用户界面。
这里简要列出了我在手稿中做的变动：
l 把诸如搜索、提交和登录等类似（都有交互）的条目组一块儿
l 把筛选项们组一块儿，内容页们配一起
l 把标题改为“Show HN”和“Ask HN”，以便用户将网站名“Hacker News”同常用缩写“HN”联系起来
l 增加分页
l 清理页脚
4. 用PS完善
我用的是过时版本的PS CC，作品也没啥特效，因此任意版本的PS都能打开。
字体：Avenir
一款版本多样（粗细均有），整洁简约的通用字体。我已经忘掉来源了，就记得当时在谷歌里敲入诸如“好看轻巧易读的字体”一类的关键词。
配色：用ColorZilla——一款Chrome的插件挑出来的。
图标：搜索图标来自 Glyphish6图标集。
要问什么最耗时间，当属对齐，以及每篇文章的排版，因为同款设计样式得重复13遍。反复再反复是检验一款设计是否可扩展的捷径。
最终设计成果（附带登录窗口）在此呈现：
再设计当中的问题
设计永无止境，那么还可以做哪些优化？
l 编辑：文本，尤其是文章字太小了。唉，该首先给老妈过一下目的:p
l 多做些用户测试（我的调研对象数目为3）。
l 添加HTML+CSS代码做出功能性原型，增添游戏般的体验。
l 对于如何在首页妥善安排更多内容，来场头脑风暴（本来有30个，我的只有14个）。（理想情况是，新添的分页可以分担一部分，也能诱导用户深度浏览。）
l 在用户测试的时候本该录个影或者至少录个音的，好让大家知道用户的原话是怎么说的。
能让各位读者见识到实际的用户反应的话就好了╮(╯▽╰)╭
兼听则明，将心比心
10
作品
40
粉丝
2
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册