怎样从零开始计一律款大度的移动APP？
|
以下内容由Mockplus团队翻译清算，仅供进修交换。 我13岁时开始进修平面计划。我从网上课程学会了计划网站，并风俗于全天行使Photoshop和Affinity Designer举办计划。那些经验教会了我怎样像计划师那样思索。 我计划和开拓应用措施快要有一年时刻了。我介入了麻省理工学院的一个项目，与一个团队相助开拓Universeaty。 两个月前，我开始研究一个新的应用措施-Crypto Price Tracker，这款APP我会在1月28日宣布。 在这篇文章中，我将共同实例声名我在从事应用措施计划时的一步一步的进程。这应该对任何想进修或改造数字计划手艺的人有所辅佐。计划并不是所有相识怎样行使计划软件，这篇文章也不会教你怎样行使软件。收集上稀有以百计的优质教程资源可以教你进修怎样行使计划软件。想做好计划，你必要领略你的产物，熟知它的特点和成果，以及在计划时始终将终端用户放在内心。这就是这篇文章的意义地址。 计划进程： 1.为每个页面建设一个用户流程图。 2.建设/绘制线框图。 3.选择计划图案和调色板。 4.建设模子。 5.建设一个动画应用措施原型，并要求人们对其举办测试并提供反馈。 6.给出最后调解确定的模子，并交由开拓按原型编写代码。 我们正式开始吧! 用户流程图 第一步是想出在你的应用措施中想实现的成果。一旦你有了你的设法，计一律个用户流程图。用户流程图是用户通过app/网站举办会见的一个很是高级的暗示。 凡是，用户流程图由三种外形构成。 矩形用于暗示页面。 方块用于暗示决定(譬喻，点击登录按钮，向左滑动，缩放)。 箭头将页面和决定毗连在一路。 用户流程图长短常有效的，由于它们给出了应用措施怎样运作的精采逻辑思绪。 下面是我在开始计划应用措施时绘制的用户流程图。
主界面的用户流程图。 线框图 一旦你完成了每个页面的用户流程图并计划了用户蹊径，你就可以开始为全部页面做线框图了。线框图在本质上是以低保真度情势暗示你的应用措施外面。根基上是图像，标签，按钮，和其余元素的一个草图或一个外观，这些元素城市在页面上做好机关和定位。你的应用措施的草图会浮现它是怎样行使的。 我行使UI模板打印的模板来绘制线框图。 它既可以节减时刻，并且给为我提供了一个很好的画布来画图和做条记。 下面是我绘制的一个线框图例子。
主界面的线框图。 绘制好线框图后，你可以行使一款名为Pop的应用措施，并行使该应用措施将草图照相存档，再通过「连结」(link to)的成果，将一张张草图串联起来，就能直接在手机屏幕上展示原型现实运作的样子。 计划图案和颜色调色板 这是我最喜好的部门。这就像逛街一样。有大量的计划图案和调色板可供选择。我可以去选择我喜好的，并感觉它们给我带来的视觉结果。 探求计划图案的最佳平台是Mobile Patterns和Pttrns。想要找到好的调色板，你可以去“ Color Hunt”平台。 建设模子 这是当你最终行使计划软件的时辰了。计划意义上的模子是以高保真的情势来暗示你的应用措施。这就像你未来现实行使时进入这个应用措施，然后你从这内里做一些截图。它看起来应该很实际，很是像真实的对象。 有一些用于建设模子的计划软件和器材。我行使Affinity designer来建设模子。iOS计划中最常用的器材是Sketch。 下面是我早期计划APP中的一些实例。
我行使了各类百般的调色板来举办计划。
我给我的伴侣分享了最初的模子，以得到他们的反馈。许多人好像更喜好黄金渐变和玄色配景。 我乐意接管更多的反馈并实行新的提议!想得到更好的用户体验的要领是多与终端用户交换。当你与终端用户攀谈时，你会发明用户有许多奇奥的设法，而不是去猖獗地翻阅Dribbble或Behance。 以是我从头计划了模子并删除了配景图，由于天生它们在技能上是一个耗时的进程，除此之外，它们还低落了可读性。下面就是我从头计划模子后的样子。
黄金渐变和玄色配景看起来很是不错! 我对这套颜色方案、标签拦亓?图标和整体机关都很是满足。我继承凭证沟通的计划指南计划了别的的页面。这是一个漫长而风趣的进程! 一旦我的页面筹备停当，我就在Adobe XD上建造了一个原型，并请几个伴侣举办行使并给出反馈。 颠末最终的润色，下面是我确定的计划界面。
这就是最终的主界面! 全部的页面完成后，我将它们导入到Xcode中并开始编写应用措施代码。 这就是我本日要分享的内容!我但愿这篇文章可以或许辅佐你开始在计划应用措施时找到灵感，可能辅佐你成为更好的计划师。假如你喜好我的应用措施，你可以在这里下载。 我将以我最喜好的计划名言之一来竣事这篇文章。
计划不在于它看上去怎样摸起来怎样，计划在于它是确定产物怎样运作的。 原文作者：Harshita Arora 原文地点：https://medium.freecodecamp.org/designing-beautiful-mobile-apps-from-scratch-1a3441ebd604 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
