英语书名：Designing beautiful mobile apps from scratch
镜像：https://medium.freecodecamp.org/designing-beautiful-mobile-apps-from-scratch-1a3441ebd604
OSC 译者： 臧玉琰_, Tocy, 无若, Tot_ziens
我从 13 岁时已经开始自学平面结构设计。透过网路上讲义渐渐学会了结构设计中文网站，并惯于每晚采用 Photoshop 和 Affinity Designer 应用领域软件。那些历经天主教会了我怎样像结构雕塑家那样思索。
我秉持结构设计和合作开发应用领域整整有两年天数。我参与了斯坦福大学的三个项目，是与三个工程项目组联合合作开发 Universeaty。三个月前，我已经开始科学研究三个捷伊 Crypto Price Tracker 应用领域，并于前段天数（1月28日）将其正式发布。
在这首诗中，我将撷取该应用领域实例一步棋一步棋的结构设计操作过程。这如果有利于那些想自学并提升她们的网络化结构设计基本功的人。这首诗不能教你怎样采用结构设计应用领域软件，即使结构设计并不而已介绍怎样采用结构设计应用领域软件就够了，所以网路上也有数以千计的高质量新浪网自学讲义。我指出结构设计是关于怎样认知你的商品，特征和机能的操作过程，与此同时结构设计须要维持仍旧从采用者的视角著手。这是这首诗的象征意义所处。
结构设计操作过程：
1.为各采用者展现介面建立三个采用者时序。
2.建立/绘出洼瓣。
3.选择结构设计图案和调色板。
4.建立模型。
5.建立三个动画应用领域程序原型，并要求体验人群对其进行测试并提供反馈。
6.给模型做最后的调整，在最后的介面准备好后已经开始编码。
01
采用者时序
第一步棋是找出你想在应用领域中呈现的机能。一旦你有了想法，结构设计三个采用者时序。采用者时序是透过采用你的应用领域程序/中文网站的采用者体验流程的抽象表示。
通常，采用者时序由三种形状组成。
·矩形用于表示屏幕介面。
·菱形用于表示采用者的选择（例如，点击登录按钮，向左滑动，放大）。
·箭头将屏幕和采用者选择连接在一起。
采用者时序是非常有用的，即使它们给出了应用领域程序是怎样运作的三个良好逻辑思路。
下面是我在已经开始结构设计应用领域时绘出的采用者时序。
02
洼瓣图
完成每个屏幕的采用者时序和采用者流程结构设计后，你将已经开始制作所有屏幕的洼瓣图。 洼瓣本质上是粗略的，表现你的应用领域程序的外观。 本质上是三个采用者将会浏览到的草图或轮廓图像，标签，按钮和素材，和它们的布局和定位。是一张你的应用领域将怎样工作的粗略草图。
我采用 UI Stencils 的排版模板来绘出洼瓣。 它大大节省了天数，并提供了三个很好的画布来绘出和做记录。
这是三个洼瓣实例。
绘出洼瓣后，你可以采用名为 Pop 的应用领域程序，并采用该应用领域拍摄所有的绘图图片，并透过按钮连接所有屏幕介面来制作原型。
03
结构设计模式和颜色调色板
这是我最喜爱的部分，它就像逛街（window-shopping）那样，大量的结构设计模式和颜色调色板可供选择。我选择了我所喜欢的，并试验她们（的效果）。
找结构设计模式的最佳平台是 Mobile Patterns 和 Pttrns 。要找好的颜色调色板就去 Color Hunt 吧。
04
实体模型
这是你最终采用结构设计应用领域软件的时候。结构设计象征意义上的实体模型是对你的结构设计的高保真的表达。这几乎就像你未来打开这个应用领域程序，并从它那里得到一些截图那样。它如果看起来很现实，很像真正的那样。
有用于建立实体模型的结构设计应用领域软件和工具。我采用 Affinity designer 。IOS 最常用的工具是 Sketch 。
这有些早期为我的 APP 结构设计的例子。
我用各种颜色调色板做了更多的实验。
我与我的朋友撷取了最初的模型，以获得她们的反馈。很多人似乎都喜欢黄金渐变和黑色方案。
我愿意接受她们的反馈并尝试捷伊建议！当你与她们交谈时，你会发现采用者的奇妙想法，而不是疯狂地翻阅 Dribbble 或 Behance 中文网站素材。
所以我重新结构设计了模型并删除了背景图，即使生成工程项目是三个技术上耗时的操作过程，与此同时也降低了可读性。这是我重新结构设计的模型的样子。
我对颜色方案、标签栏上的图标和整体布局都非常满意。我继续按照相同的结构设计指南结构设计了其余的屏幕方案。这是三个漫长而有趣的操作过程！
等我所有的屏幕介面都准备好了，我就在 Adobe XD 上制作了三个原型，并请几个朋友进行试用并给出反馈。
经过最后的调整，我最后的结构设计看起来像这样：
在所有的介面完成后，我将它们导入 Xcode 并已经开始编写应用领域程序。
就那些了！我希望这首诗能够帮助你已经开始自学应用领域程序结构设计，或者帮助你成为更好的结构雕塑家。如果你喜欢我的 APP ，下载地址为：（https://itunes.apple.com/us/app/crypto-price-tracker/id1333696099?ls=1&mt=8）
我将以我最喜欢的有关结构设计的名言结束本文。
“结构设计并非外观怎样，感觉怎样。结构设计是(解决)它是怎样工作的。”- 史蒂夫·乔布斯
