这是一篇翻译自 Cultured Code 团队关于 iPhone 版 Things 的界面设计流程的文章（原文链接）。作为设计人员我觉得这篇文章非常值得和大家分享──特别是在设计思路上非常值得大家去揣摩（很有德国人严谨的思路），但由于我是不是专职的英语翻译，所以在翻译质量上还望各位路过的 XDJM 多多包涵：）

Designing the UI of Things for iPhone
设计 iPhone 版本的 Things 界面

By Cultured Code,  由 Chris 翻译。如需转载原文，请联系 Cultured Code；如需转载翻译，请直接留言：）

We recently shared some early interface sketches of Things for a presentation on iPhone User Interface Design.
我们最近在一个 iPhone 用户界面设计的聚会上分享了一些 Things 早期设计的草稿。

You can also visit the official product pages for Things for iPhone and Things for Mac.
你可以访问官方产品页面去看看 iPhone 版本的 Things 和 Mac 版本的 Things。

To-Do List
待办事项列表

Out of curiosity, we tried to recreate the look of the Mac version in some early Photoshop mockups.
处于好奇，我们一开始用了 Photoshop 来做了一些和 Mac 版本类似的模型。

It looked nice but it didn’t feel right. Here’s a sketch of what we did instead …
它看上去不错，但是完全不是 iPhone 的感觉。所以我们用素描的草稿代替……

… and the final screenshot.
……得到的最终界面截图。

Toolbar or Tab Bar?
工具栏还是标签栏？

One of the first major design decisions was to either have a Tab Bar or a Toolbar.
使用标签栏还是工具栏成为首先需要解决的问题。

We liked the idea of a Tab Bar very much as it allowed to quickly browse your tasks from different perspectives (by Projects, by Tags, by Due Date, Search, …)
我们非常喜欢标签栏的设计，它可以让你以不同的方式来快速切换你的任务，如按照项目、按照标签、按照日期、搜索等等。

But we soon realized that we definitely needed a toolbar. In order to manipulate the current list, the user needs a set of tools (Create New To-Do, Mark For Today List, Move To-Do, …) And we wanted these tools to be easily accessible in the toolbar.
但我们很快发现我们还需要一个工具栏。为了对当前列表进行操作，用户需要一些工具（用来新建待办事项、标注当天列表、移动待办事项等等），而我们也希望这些工具能够放在工具栏让用户很方便的使用。

We also found that we would have needed more than 5 tabs. So some of them would have been hidden inside the “…”-tab.
同时，我们还发现我们至少需要 5 个标签，所以有的标签需要使用“更多（……）”标签来隐藏。

The final sketch for the home screen with a Toolbar instead of a Tab Bar:
用工具栏代替标签栏的主页，最终草稿。

An early screenshot (using the icons of the Mac version):
早期界面截屏（使用了 Mac 版本的一些图标）：

The final screenshot (new icons):
最终界面截屏（新图标）：

Quick Entry
快速新建

A very early sketch:
初期草稿：

This is a sketch of the Quick Entry as we implemented it in the 1.0 release …
我们在 1.0 版本中使用的快速新建的草稿……

… and a screenshot.
……和截图。

Our original Quick Entry dialog of the 1.0 release wasn’t very “quick”. Tapping on the “+” in the toolbar brought up the Quick Entry dialog, but you couldn’t start typing right away. You still had to tap on the title.
我们在 1.0 版本中最初设计的快速新建其实并不“快速”。轻击工具栏上的“新建（+）”之后会弹出快速新建的对话框，但是用户此时仍然无法开始输入内容，用户需要再次轻击对话框的标题才能开始编辑。

So we went back to the drawing board. We tried to find a solution where the user could start typing right away, but the additional details (due date, tags, notes) were not hidden behind the keyboard.
所以我们又回到了画板前。我们试图找到一个用户能够最快开始编辑，同时一些相关的细节内容（如日期、标签、说明等）不会被输入的屏幕键盘给挡住的解决方法。

Another approach:
另一方案：

This is how we implemented it for the 1.1 update:
我们在升级到 1.1 版本中实施的方案：

After tapping on the details button:
轻击“细节”按钮之后：

Today Toggle Mode
当天切换模式

We deemed it very important that the user is able to quickly mark multiple to-dos for the Today list. So we came up with a Today Toggle Mode (similar to the default Edit mode).
我们设定用户会在当天列表中快速地标记多个待办事项非常重要，所以我们设计出来一个“当天切换模式”（和默认的编辑模式类似）。

Sketch:
草图：

Final Screenshot (due items are always in the Today list, so they cannot be un-marked. We show this with the red color):
最终截图（由于条目是一直在当天列表中显示，不能被取消标记，所以我们用红色来标记。）：

Detail View
详细视图

Final Screenshot:
最终截图：

What we like about this design:
我们中意的设计：

• Clear separation between To-Do data and action buttons.
  待办事项和操作按钮条理清楚；
• No accidental editing possible if you only want to view the data (you have to tap on Edit first).
  当你只想查看的时候不会误操作（必须轻击“编辑”才能开始）；
• Easier differentiation between list and detail views through the use of the plain and the grouped table style, respectively.
  使用简单的背景和表格分组方式，让列表视图和详细视图更加容易区分；

Some more pictures
更多照片