当前位置: 首页 >  小程序

如何从零开始设计一款漂亮的移动APP?

发布日期:2020-03-16

在这篇文章中,我将配合实例说明我在从事应用程序设▉计时的一步一步的过程。这应该对任何想学习或改进数字设计技能的人有所帮助Б。

我13岁时开始学习平面设计。我从网上课程学会了设计网站,并习惯于全天使用Photoshop和Affinity Designer进行设计。那些经历教会了我如何像设计师那样思考。

我设计和开发应用程序将近有一年时间了。我参加了麻省理工学院的一个项目,与一个团队合作开发Univ▽erseaty。 两个月前,我开始研究一个新的应用程序-Crypto Price Tracker,这款APP我会在1月28日发布。

在这й篇文章中,我将配合实例说明●我在ⓥ从事应用程序设计时的一步一步的过程。这应该对任何想学习或改进数字设计技能的人有所帮助。

设计并不是全部了解如何使用设计软件,这篇文章也不会教你如何使用软件。网络上有数以百计的优质教程资源可以教你学习如何使用设计软件。想做好设计,你需要理解你的产品,熟知它的特点和功能,以及在设计时始终将终端@用户放在心里。这就是这篇文章的意义所在。

设计过程:

为每个页面创建一个用户流程图。 创建/绘制线框图。 选择设计图案和调色板。⊙ 创建模型。 创建一个动≌画应用程序原型,并要求人们对其进行测试并提供◇反馈Ⅲ。 给出最后调整确定的模型,并℅交由开发按原型编写代码。

我们正式开始吧!

用户流程图

第一步是想出在你的应用程序中想实现的功能。一旦你有了你的想法,设计一个用户流程图。用户流程图是用户通过app/网站进行访问的一个非常高级的表示。

通常,用户流程图由三种形状┒组成。

矩形用于表示页面。 方块用于表示决策(例如,点击登录按钮,向左滑动,缩放)。 箭头将页面和决策连接在一起。

用户流程图是非常有用的,因为它们给出了应用程序如何运作的良好逻辑思路。

下面是我在开始设计应用程序时绘制的用户流程图。

主界面的用户流程图

线框图

一旦你完成了每个页面的用〢户π流程图并设计了用户路线,你就可以开始为所有页面做线框图了。线框图在本质上是以低保真≤度形式表┐示你的应用程序外观。基本上是图像,标签,按钮,和其它元素的一个草图或一个轮廓,这些元素都会在页面上做好布局和定位。你的应用程序的草图会体现它是如✿。✿何使用的。

我︱︳使用UI模板打印的模板来绘制线框图〥。 它既可以节省时间,而且给为我提供了一个很好的۩画布来绘图和做笔记。

下面是ч我绘制的一个线框图例子┈┉。

主界面的线框图

绘制好线框图后,你可以使用一款名为Pop的应用程序,并使用该应用程序将草图拍照存档,再通过「连结」(link to)的功能,将一张张草图串联起来,就能直接在手机屏幕上展示原型实际运作的样子。

设计图案和颜色调色板

这是Ω我最喜欢的К部分。这就像逛街一样。⿸有大量的设计图案≯和调色Ψ板可供选择。我ⓛ可以去选择我喜欢的,并感受它们给我带来的视觉效果。

寻找设计图案的最佳平台是Mobile Patterns和Pttr∞ns。想要找到好的调色板,你可以去“Color Hunt”平台。

创建模∏型

这是当♧你最终使用设计软件的时候了。设计意义上的模型是以高保真的形式来表示你的应用程序。这就像你将来实际使用时★▲进入这个应用程序,然后你从这里面做一些截图。它看起来应该很现实,非常像真实的东西。

有一些用于创建模型的设计软件和工具。我使用Affinity designer来创建模型。iOS设计中最常用的工具是Sketch。

下面是我早期设计APP中۞۞的一些实例。

我使用了各种各样的调色板来进行设计。

我给我的朋友分享了最ↂ初的模型,以获得他们的反⿰馈。很多人似乎更喜欢黄金渐变和黑色背景。

我愿意接受更多的反馈并尝试新的建议!想获得更好的用户体验的方法是多与终端用户交流。❤当你与终端用户交谈时,你会发现用户有很多奇妙的想法,而不是去疯狂地翻阅Dribbble或B└ehance。

所以我重新设计了模型并删除了背景图,因为生成它们在技术上是一个耗时的过程,除此之外,它们∶还降低了可读性。下面就是我重新设计模型后的样子。

黄金渐变和黑色背景看起来非常不错!

我对这套颜色方╢案、标签栏上的图标和整体布局都非常满意。我继续按照相同的设计指南设计了其余的页面。这是一个漫长而有趣的过程!

一旦我的页面准备就绪,我就在Adкobe XD上制作了一个原型,并请几个朋友进行使用并给出反馈。

经过最终的润色,下面是我确定的设计☆界ω面。

这就是最终的主界面!

所有的页面完成后,我将它们导入到Xcode中并开始编写应用程序代码。

这就是∈我今天要分享的内容!我希望这篇文章能够帮助你开始在设计应用程序时找到灵感,?或者帮助你成为更好的设计师。

我将以我最喜欢的设计♨名言之一来结束这篇文章。

设计不在于它看上去〡如何摸起来如何,设计在于它是确定产品如何运作的。

——史蒂夫•乔布斯

 

原文作者:Harshita Arora

原文地址:https://medium.freecodecamp.org/designing-beautiful-mobile-÷apps-from-scratch-1a3441ebd604

本文由 @Mockplus 团队翻译发布于人人都是产品经理。未经许可,禁▀止转载。

题图来自,基于CC0协议

  • 通过建立关键词库去对网站...

    cambrian.bar({ data: { type: 'body' ...

  • 淘票票专业版3.0新版上...

      6月26日,淘票票专业版宣布新版3.0版上线,同时新增首页角色定制功能:当用户在登录新版本时,可根据自身角色选择“片方、宣发、影院、影迷”四大身份,之后将收到淘票票专业版根据用户所选角色针对性地推送不同内容。   业内分析,淘票票专业版将由一个专业化、标准化的数据工具,升级为一个用户导向更为明显的、千人千面的全产业链数据服务平台。这也为...

  • 从五大企业实践案例,探索...

    新时代的到来,促使企业进行业务变革与创新,同时对组织变革也提出了新的要求,传统的组织模式很难再适应当下的挑战,只有兼具稳定和灵活的组织才能适应当前的商业环境,敏捷组织已经成为让企业保持高竞争力和效率的制胜法宝。目前,国内外不少的企业已经开始探索敏捷组织的形态,以此来更加敏捷的应对持续变化的环境。「首席数字官」研究了五家企业在数字化组织方面的实践,并总结了企业的三大数字化转型组织形态:集中式、联邦式...

  • 【站长】外链发布这样做效...

      【站长】外链发布这样做效果更加好  目前,我们不可否认的是社交媒体对SEO的影响,特别是新媒体平台,很多比较成熟的公司都会在原有的SEO部门增加新媒体部,这就意味着,基础性的营销推广,不单单存在于SEO,以往通过SEO获取大量流量的操作,目前只成为渠道之一,所以作为SEO人员,我们有的时候应该一分为二的去看问题。  外链建设:为什么要这么做?  针对SEO人员,日常工作都是有明确的目标,通过优...

  • 把URL五马分尸

    你一定每天工作显得很忙,你一定各种资讯、八卦、娱乐信息一条不漏,下班后感觉一天头昏脑胀,好像并没有真正干什么事情,有木有? 不知道你啥样,我基本每天早九晚九,浑浑噩噩,但是好像八卦一个都没落下。 你每天打开几十个页面,是否观察过它们的Url地址?今天带你“庖丁”解牛(庖丁两个字带了引号哦,你应该可以看出我是个很谦虚的人),让Url跳段脱衣舞,把它...

  • CMR:2017年Q2小...

    199IT原创编译 CMR发布了2017年上半年印度智能手机市场数据。 值得注意的是,小米、联想、Vive和OPPO的增长率在7%到33%。 智能手机已经进入印度市场十年,三星仍然保持领先地位。 2017年第二季度,印度手机出货量6180万部,其中54%是功能手机(增长9%)。 小米在印度智能手机市场排在第二位,为4000-6000印度卢...

  • 专业SEO优化需留意事宜

        SEO职业的开展,呈现了许多水平凹凸纷歧的SEO优化人员,有的是专业SEO优化,全面的优化网站,但也有的是学了点皮裘的SEO优化,只对网站进行一些简略的优化。而发生的作用就是,专业SEO优化的网站往往很快就有了排名,并且作用很好,而随意优化的网站,却一直在原地徜徉,不上不可,乃至还呈现掉排名的现象。这就是...

  • 2017年7月Whats...

    短信应用WhatsApp官方今天宣布日活跃用户数量超过10亿,月活跃用户超过13亿,每天发送的信息数量超过550亿条,每天发送的照片超过45亿张,每天分享的视频超过10亿段,目前已经支持60多种语言。 WhatsApp的联合创始人Jan Koum表示:“无论是分享个性化照片和视频,还是通过视频聊天方式进行交谈,或者通过每天的状态来...

  • 【案例个人建站seo】S...

        我之前的文章是从技术的角度来做SEO的。本文将给您举几个例子来说明为什么SEO依赖于技术分析。除了写这篇文章的想法,我直想表扬些在07年前做SEO的阿里巴巴同事,他们在SEO领域做了很多很好的实践,对网站做出了很大的贡献。        ...

  • 谷歌I/O正式发布And...

    飞象网讯 北京时间5月8日凌晨,一年一度的Google I/O开发者大会在美国加州的海岸线圆形剧场(Shoreline Amphitheater)召开,会上谷歌在推出Google Pixel 3a、Google Pixel 3a XL手机、谷歌智能助理软件之外,还正式发布了全新一代Android Q系统。Android Q系统支持折叠屏、支持5G、增加暗黑模式、更注重安全和隐私等等,都为大家带来了...

  • 百度排名更新阶段哪些事项...

        百度排名更新阶段值得注意几个要点,百度搜索引擎现在有一个固定的更新时刻,在这个特殊的日子里,我们的站长应该会投缘搜索引擎采取一些特殊的优化方法,一方面是给搜索引擎带来良好的形象,另一方面是抓住关键来清理一些负面影响,比如网站实力可能受损等。 &n...

  • 拍拍品牌全面升级 巨头“...

    在经济结构转型的影响下,大众消费观念在持续改变,极具性价比的二手市场迎来蓬勃的发展。近日,二手交易市场再掀波澜,在京东拍拍成立一周年之际,正式宣布启用“拍拍”新品牌标识及APP图标,并将于12月22日成立拍拍“质检研究院”,进一步加强技术监管推进品质二手服务升级,从而促进供给端标准化,让二手买卖交易更具品质,推动二手交易市场进入“品质时代”。聚焦二手需求推三重解决方案 二手市场迎来“品质”Pro时...