A lot of my work lately has been making design system specs and tools for IBM. Yet, I needed a break back into product design. So over the last couple of weeks, I spent free time working on a fun design challenge.
最近，我的很多工作都是为IBM设计系统规范和工具。 但是，我需要重新设计产品。 因此，在过去的几周中，我将空闲时间花在了一个有趣的设计挑战上。
I am going to walk you through how I identified a problem, pushed myself in a new direction, and learned some new tricks.
我将向您介绍如何确定问题，将自己推向新的方向并学习一些新的技巧。
Note that I’ve written a sister article about how to code this Progressive Web App news website here.
请注意，我已经写了关于如何编写这种渐进的Web App的新闻网站一姐的文章在这里 。
找出问题 (Identifying the Problem)
Designing for yourself is the easiest project you will ever have.
亲自设计是您将拥有的最简单的项目。
While working, I noticed a new behavior at work. I would become bored on a task after a while and then check Reddit’s r/WorldNews. The problem was that I wanted to browse that page to feel up-to-date on current events but that is not what happened.
在工作时，我注意到工作中有新行为。 过一会儿，我会变得无聊，然后查看Reddit的r / WorldNews。 问题是我想浏览该页面以了解最新动态，但事实并非如此。
The page focuses on the community aspects with up-voting and comments. Granted, that is what Reddit was built for.
该页面侧重于社区方面的投票和评论。 当然，这就是Reddit的目标。
The benefit of r/WorldNews is that the headlines at the top are upvoted because others found them important or interesting.
r / WorldNews的好处是，顶部的头条新闻已被顶替，因为其他人认为它们很重要或很有趣。
I wanted to focus on those headlines and also have the option to dig deeper into a story. Comments would distract me from doing that. I once saw a study saying that Reddit users were more likely to go straight to the comments instead of clicking the link posted. I knew this was true from my own behavior and it kept me from reaching my intended goal of reading the articles.
我想专注于这些头条新闻，还可以选择更深入地研究故事。 评论会使我分心。 我曾经看到一项研究说Reddit用户更有可能直接查看评论，而不是单击发布的链接。 从我自己的行为来看，我知道这是真的，这使我无法实现阅读文章的预期目标。
So I set a goal for the user experience:
因此，我为用户体验设定了一个目标：
A user can stay up-to-date on the top news from across the web without community distractions.
用户可以在不引起社区干扰的情况下，从网上获取最新新闻。
保持拟态 (Staying Skeuomorphic)
Listen, sometimes you need a break from what you are working on. You need to take a step back and do the exact opposite. In this case, I needed to get away from my flatter-than-a-pancake designs. I needed to stop abstracting UI like Jackson Pollock.
听着，有时候您需要与正在研究的内容稍作休息。 您需要退后一步，然后执行相反的操作。 在这种情况下，我需要摆脱扁平化设计。 我需要停止像Jackson Pollock这样抽象UI。
I needed to go back to the late 2000’s skeuomorphism craze. Everything resembled analog items.I decided to get skeuomorphic with newspapers.
我需要回到2000年后期的拟态热潮。 一切都类似于模拟物品。我决定在报纸上模仿。
Sunday morning as a kid, my dad and I would go out to a Tex-Mex restaurant to eat breakfast tacos and read the local paper. There was a bliss in those moments because you would scan the stories for an hour. You eyes would jump around to find the next story you prioritized. There were no opinions besides Dear Amy telling me how to address my non-existent bully at work.
星期天早上，小时候，我和我父亲会去一家Tex-Mex餐厅吃炸玉米饼，并阅读当地报纸。 在那一刻有幸福，因为你会花一个小时来浏览故事。 您的眼睛会跳来跳去，找到您优先考虑的下一个故事。 亲爱的艾米(Dear Amy)告诉我如何解决工作中不存在的欺凌者，没有其他意见。
So I set a goal for the visual design:
因此，我为视觉设计设定了一个目标：
The appearance will only bring in web-based elements as needed and emulate a physical newspaper as much as possible.
外观只会根据需要引入基于Web的元素，并尽可能地模仿实体报纸。
I had already seen that New York Times and Financial Times do great jobs of emulating their non-digital roots. But I stayed away from them to see what patterns I could recognize from newspaper layouts themselves.
我已经看到， 《纽约时报》和《 金融时报》在模仿非数字根源方面做得很好。 但是我远离他们，看看我可以从报纸版面本身识别出什么模式。
It was a blast to look over the newspapers, and there were a lot of identifiable trends:
浏览报纸真是风花雪月，有很多明显的趋势：
- Dramatic type scale 戏剧性比例尺
- Masonry layout 砌体布局
- Justified text 对齐文字
- Just enough images to capture initial attention 足够的图像来吸引最初的注意
- A header break with details of the issue 标头中断，包含问题的详细信息
- Sweet, ruffled texture 甜美，荷叶边质地
去新闻界 (Going to the Press)
Sticking to the newspaper trends helped me iterate on the design. The only sketches I would have to show are solid rectangles for layout. This is because I work faster by prototyping directly in code. The only time I felt like I broke the skeuomorphism was to support offline mode.
坚持报纸趋势有助于我迭代设计。 我只需要显示的草图是用于布局的实心矩形。 这是因为通过直接在代码中进行原型制作，我可以更快地工作。 我唯一感觉像我打破了缩略词是支持离线模式。
In that situation, I needed to tell the user that they were looking at outdated stories based on their connection:
在这种情况下，我需要告诉用户他们正在根据他们的联系来查看过时的故事：
A lot of offline UX patterns include an “attempt to reconnect” interaction, but I believed this went against the visual goal I had made previously. The rationale was that users already know how to refresh a page in their browser and that the stories would automatically update if their device regained connection anyways.
许多离线UX模式包括“尝试重新连接”交互，但是我认为这违背了我先前制定的视觉目标。 原因是用户已经知道如何在浏览器中刷新页面，并且如果设备无论如何重新获得连接，则故事将自动更新。
One user-based performance stats that was doing poorly while I was working on this was the perceptual speed index. This measures how fast the user believes the experience based on how fast elements visually appear. The low score was due to a quick load of the page but then a delay for the stories to actually appear. I was able to improve the score with loading skeletons for the stories.
在我从事此工作时，基于用户的性能统计数据表现不佳是感知速度指数。 这会根据元素在视觉上出现的速度来衡量用户相信体验的速度。 得分偏低的原因是页面加载速度快，但故事的实际显示出现了延迟。 通过加载故事的骨架，我能够提高得分。
Side Note: You can learn more about perceptual speed index and how to measure it in this guide: The Quick, New Way Designers Can Test User-Centric Metrics.
旁注 ：您可以在本指南中了解有关感知速度指数以及如何进行测量的更多信息： 设计人员可以快速，新颖的方式测试以用户为中心的指标 。
The final detail I felt compelled to flesh out was a conversion. What action could I measure as an achievement on my end? Just visiting the site was not enough to measure success. So I ended up positioning “advertisements” within the experience.
我认为必须充实的最后一个细节是一次转换。 我可以衡量采取什么行动来成就自己？ 仅仅访问站点还不足以衡量成功。 因此，我最终在体验中定位了“广告”。
There are two different types of ads:
有两种不同类型的广告：
- Everyone sees links to donate to charity. The hope is that if a user becomes a frequent user, they would click the same charitable ad they see over and over again. 每个人都看到捐赠给慈善机构的链接。 希望是，如果用户成为常客，他们会一遍又一遍地点击相同的慈善广告。
- Users with up-to-date Chrome and Firefox browsers see links to install the browser plugin. The plugin, Global Upvote Tab, makes every new tab The Global Upvote while still giving the user immediate control of their URL bar. 使用最新的Chrome和Firefox浏览器的用户会看到安装浏览器插件的链接。 插件“ Global Upvote”选项卡使每个新选项卡成为“ Global Upvote”，同时仍使用户可以直接控制其URL栏。
最终结果 (The Final Outcome)
I am satisfied with how this two week side-project turned out! Sticking with the minimalistic user experience and visual goals kept the project brief, but focused. While it is may be cheating that I consider myself the user, I continue to enjoy The Global Upvote as my new tab experience.
我对这两个星期的副项目结果感到满意！ 坚持简约的用户体验和视觉目标，使项目简短但重点突出。 虽然我认为自己是用户可能是作弊，但我继续喜欢The Global Upvote作为新的标签体验。
If I went back and did anything different, I would create multiple layouts that rotate as the user visits at different times. This would rid the user of being tired of always seeing images and ads in similar places. The one benefit I do have, thanks to dynamic data, is ever-changing heights.
如果返回并执行其他操作，则会创建多个布局，这些布局会随着用户在不同时间的访问而轮换。 这将使用户摆脱总是在相似位置看到图像和广告的烦恼。 多亏了动态数据，我的一个好处就是身高不断变化。
I hope you enjoyed this case write-up!
希望您喜欢这个案例！
Again, I’ve written a sister article about how to code this Progressive Web App news website here.
同样，我在此处撰写了一篇有关如何编写此渐进式Web App新闻网站的姐妹文章。
For further information: Feel free to contact me by the comments, email, or @seejamescode. I work in ATX for IBM Design and always love conversation with the web design community.
有关更多信息：请通过评论， 电子邮件或@seejamescode与我联系。 我在ATX for IBM Design工作，并且一直喜欢与Web设计社区进行对话。
扫一扫
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
