几周前，我花了一个周末重新福利彩票预测了我最喜欢的网站之一，黑客新闻。一段时间没有进行重新福利彩票预测，我知道我要做的第一件事是建立一些动机来重新福利彩票预测网站。
原始HN福利彩票预测： news.ycombinator.com
Photoshopd文章＃7-28出来了’会占用整个该死的职位！
我的HN重新福利彩票预测：
单击此图像可放大到全分辨率视图
TL; DR我使用的过程
1.启发式分析
作为常规 user of 黑客新闻, I had to put on a pair of fresh eyes.
我抓取了整个页面的图像，然后放大，从左到右缓慢移动。如果我是新用户，一切都有意义吗？
启发式方法基本上意味着“best practices,”所以我评估了该网站以测试该网站是否使用 用户体验 约定。 我发现这些是最大的问题 在我的启发式分析中
- 系统状态的可见性
用户可能不完全知道主页是最新的，投票最多的内容的过滤器 - 搜索栏的位置
It’位于页面底部 - 分页
没有分页，只有一个“More” button - 项目分组
不同功能的项目组合在一起– should be separated
2.用户测试
I was so used to 黑客新闻 that it was natural to assume others used it the same way I did.
所以我问了几个朋友’在浏览该网站之前，您从未访问过HN。以下是我们的用户测试中的一些示例任务：
- 告诉我你看到了什么
- 你能告诉我你如何’d view new 文章s
- 让’s say you’重新寻找特定文章。你会怎么做？
仅仅通过与几个用户一起进行操作，我就发现了一些有趣的见解，并从启发式分析中证实了我的怀疑：
内容过滤
用户似乎选择了“New” and “Comments”这些就像是内容过滤器。
但 when I asked them “您能告诉我哪里可以找到最受欢迎的内容吗？”2/3的用户苦苦挣扎，并尝试点击其他过滤器 询问，工作和提交.
一位用户本能地单击了Y Combinator徽标并询问“is this it?”
我的结论是’t clear to new users that the home page of 黑客新闻 is pretty much a filter of the most popular (by upvotes) recent posts.
这也说服了我，通过将这些部分与标题分开并分成自己的部分，使过滤内容更加明显“filter tabs.”
分页
“您能告诉我如何在此页面上查看更多内容吗？”
用户花了一段时间才发现“More”按钮，但是掌握了它。
However, 当我问他们to go back to the previous page, they froze for a second. “I guess I’将使用后退按钮。”
这使我确信页面应该是分页的，而不是只有一个方向“More” button.
搜索
当要求用户搜索特定文章时，他们也冻结了一段时间。 其中一位用户使用CTRL + F并说“maybe I’ll find it this way.”
然后，当我要求他们向下滚动页面时， 当我要求他们向下滚动到页面底部时，他们说“哦，搜索栏在这里？为什么不把它放在顶部。”
这也证实了我对搜索栏的感受。
提交并登录
最有说服力的非语言符号之一是用户何时 眯 第一次看到页面时。他们在提交和登录时都着眼睛 pages:
“此页面有点难看。”
我也是那么想的。我们从首页上的漂亮的橙色变成了纯白的功利主义白色。
我也想到了– 为什么要进入单独的页面只是为了登录？ 为什么不只使用弹出窗口？ （您’会在这篇文章的结尾看到一个福利彩票预测）
3.草绘
有了洞察力，我开始 素描 用户界面。
这里’是我在草图中所做的更改的快速列表
- 将相似项目分组在一起 例如搜索，提交和登录（所有操作）
- 在自己的部分中将过滤器/内容页面分组
- 标题更改为“Show HN” and “Ask HN”这样用户可以在网站标题之间建立更清晰的联系“Hacker 新s”和常用的缩写“HN”
- 增加分页
- 清理页脚
4.素描+ Photoshop时间
那里’这个福利彩票预测没有什么花哨的地方，因此任何版本的Photoshop（或任何其他工具）都足够了。
使用的字体： Avenir
我想要一个通用的字体，它有多种变化（从浅色到粗体），而且又干净又极简。我忘记了在哪里找到Avenir，但绝对记得使用Google搜索类似“不错的光可读体型。”
色彩： 用过的 ColorZilla Chome插件挑选黑客新闻’颜色。然后，我根据该颜色调整了颜色，使其外观更加柔和。我知道这不是HN的品牌颜色，但是该死’s my redesign :p
图示：搜索图标来自 雕文6 图标集
自从我开始以来，最耗时的事情是确保所有内容都对齐并确保每篇文章看起来正确’将重复该福利彩票预测13次。 复制事物是测试福利彩票预测是否可以执行的快速方法“scale.”
最终福利彩票预测（具有登录功能的新功能）在此处：
单击此图像可放大到全分辨率视图
重新福利彩票预测的问题：
永远不要进行福利彩票预测或重新福利彩票预测“done,”所以我该怎么做才能使福利彩票预测更好？
- *编辑：文字–特别是文章测试太该死了。 igh，应该’我让我妈妈先看一下福利彩票预测：p
- 可以使用更多的用户测试（我有3个）
- 输入代码 的HTML+的CSS 为了运作 原型 给人们玩
- 头脑风暴，如何在不牺牲首页的情况下放置更多内容（原本是30个，而我的是14个）（理想情况下，新的分页将抵消这一点并鼓励人们查看更多内容。）
- 我应该’ve用视频捕获或至少一个共享用户所说内容的音频文件记录了我的用户测试。
对你本来很好’所有人都能看到真实的用户测试反应。
想要.sketch + psd File?
在下面订阅以获取福利彩票预测文件以及许多其他赠品。
发表评论