无码网站在线免费观看_午夜视频刺激性视频场所_国产极品99热在线播放69_97高清国语自产拍

讓商業(yè)變得更智能

如何從零開(kāi)始設(shè)計(jì)一款漂亮的移動(dòng)APP?
APP開(kāi)發(fā)設(shè)計(jì)

如何從零開(kāi)始設(shè)計(jì)一款漂亮的移動(dòng)APP?

以下內(nèi)容由Mockplus團(tuán)隊(duì)翻譯整理,僅供學(xué)習(xí)交流,Mockplus是更快更簡(jiǎn)單的原型設(shè)計(jì)工具。

我13歲時(shí)開(kāi)始學(xué)習(xí)平面設(shè)計(jì)。我從網(wǎng)上課程學(xué)會(huì)了設(shè)計(jì)網(wǎng)站,并習(xí)慣于全天使用Photoshop和Affinity Designer進(jìn)行設(shè)計(jì)。那些經(jīng)歷教會(huì)了我如何像設(shè)計(jì)師那樣思考。

我設(shè)計(jì)和開(kāi)發(fā)應(yīng)用程序?qū)⒔幸荒陼r(shí)間了。我參加了麻省理工學(xué)院的一個(gè)項(xiàng)目,與一個(gè)團(tuán)隊(duì)合作開(kāi)發(fā)Universeaty。 兩個(gè)月前,我開(kāi)始研究一個(gè)新的應(yīng)用程序-Crypto Price Tracker,這款A(yù)PP我會(huì)在1月28日發(fā)布。

在這篇文章中,我將配合實(shí)例說(shuō)明我在從事應(yīng)用程序設(shè)計(jì)時(shí)的一步一步的過(guò)程。這應(yīng)該對(duì)任何想學(xué)習(xí)或改進(jìn)數(shù)字設(shè)計(jì)技能的人有所幫助。設(shè)計(jì)并不是全部了解如何使用設(shè)計(jì)軟件,這篇文章也不會(huì)教你如何使用軟件。網(wǎng)絡(luò)上有數(shù)以百計(jì)的優(yōu)質(zhì)教程資源可以教你學(xué)習(xí)如何使用設(shè)計(jì)軟件。想做好設(shè)計(jì),你需要理解你的產(chǎn)品,熟知它的特點(diǎn)和功能,以及在設(shè)計(jì)時(shí)始終將終端用戶放在心里。這就是這篇文章的意義所在。

設(shè)計(jì)過(guò)程:

1.為每個(gè)頁(yè)面創(chuàng)建一個(gè)用戶流程圖。

2.創(chuàng)建/繪制線框圖。

3.選擇設(shè)計(jì)圖案和調(diào)色板。

4.創(chuàng)建模型。

5.創(chuàng)建一個(gè)動(dòng)畫(huà)應(yīng)用程序原型,并要求人們對(duì)其進(jìn)行測(cè)試并提供反饋。

6.給出最后調(diào)整確定的模型,并交由開(kāi)發(fā)按原型編寫(xiě)代碼。

我們正式開(kāi)始吧!

用戶流程圖

第一步是想出在你的應(yīng)用程序中想實(shí)現(xiàn)的功能。一旦你有了你的想法,設(shè)計(jì)一個(gè)用戶流程圖。用戶流程圖是用戶通過(guò)app/網(wǎng)站進(jìn)行訪問(wèn)的一個(gè)非常高級(jí)的表示。

通常,用戶流程圖由三種形狀組成。

矩形用于表示頁(yè)面。

方塊用于表示決策(例如,點(diǎn)擊登錄按鈕,向左滑動(dòng),縮放)。

箭頭將頁(yè)面和決策連接在一起。

用戶流程圖是非常有用的,因?yàn)樗鼈兘o出了應(yīng)用程序如何運(yùn)作的良好邏輯思路。

下面是我在開(kāi)始設(shè)計(jì)應(yīng)用程序時(shí)繪制的用戶流程圖。

Image title

主界面的用戶流程圖。

線框圖

一旦你完成了每個(gè)頁(yè)面的用戶流程圖并設(shè)計(jì)了用戶路線,你就可以開(kāi)始為所有頁(yè)面做線框圖了。線框圖在本質(zhì)上是以低保真度形式表示你的應(yīng)用程序外觀?;旧鲜菆D像,標(biāo)簽,按鈕,和其它元素的一個(gè)草圖或一個(gè)輪廓,這些元素都會(huì)在頁(yè)面上做好布局和定位。你的應(yīng)用程序的草圖會(huì)體現(xiàn)它是如何使用的。

我使用UI模板打印的模板來(lái)繪制線框圖。 它既可以節(jié)省時(shí)間,而且給為我提供了一個(gè)很好的畫(huà)布來(lái)繪圖和做筆記。

下面是我繪制的一個(gè)線框圖例子。

 

Image title

 

主界面的線框圖。

繪制好線框圖后,你可以使用一款名為Pop的應(yīng)用程序,并使用該應(yīng)用程序?qū)⒉輬D拍照存檔,再通過(guò)「連結(jié)」(link to)的功能,將一張張草圖串聯(lián)起來(lái),就能直接在手機(jī)屏幕上展示原型實(shí)際運(yùn)作的樣子。

設(shè)計(jì)圖案和顏色調(diào)色板

這是我最喜歡的部分。這就像逛街一樣。有大量的設(shè)計(jì)圖案和調(diào)色板可供選擇。我可以去選擇我喜歡的,并感受它們給我?guī)?lái)的視覺(jué)效果。

尋找設(shè)計(jì)圖案的最佳平臺(tái)是Mobile Patterns和Pttrns。想要找到好的調(diào)色板,你可以去“ Color Hunt”平臺(tái)。

創(chuàng)建模型

這是當(dāng)你最終使用設(shè)計(jì)軟件的時(shí)候了。設(shè)計(jì)意義上的模型是以高保真的形式來(lái)表示你的應(yīng)用程序。這就像你將來(lái)實(shí)際使用時(shí)進(jìn)入這個(gè)應(yīng)用程序,然后你從這里面做一些截圖。它看起來(lái)應(yīng)該很現(xiàn)實(shí),非常像真實(shí)的東西。

有一些用于創(chuàng)建模型的設(shè)計(jì)軟件和工具。我使用Affinity designer來(lái)創(chuàng)建模型。iOS設(shè)計(jì)中最常用的工具是Sketch。

下面是我早期設(shè)計(jì)APP中的一些實(shí)例。

 

Image title

我使用了各種各樣的調(diào)色板來(lái)進(jìn)行設(shè)計(jì)。

Image title

 

我給我的朋友分享了最初的模型,以獲得他們的反饋。很多人似乎更喜歡黃金漸變和黑色背景。

我愿意接受更多的反饋并嘗試新的建議!想獲得更好的用戶體驗(yàn)的方法是多與終端用戶交流。當(dāng)你與終端用戶交談時(shí),你會(huì)發(fā)現(xiàn)用戶有很多奇妙的想法,而不是去瘋狂地翻閱Dribbble或Behance。

所以我重新設(shè)計(jì)了模型并刪除了背景圖,因?yàn)樯伤鼈冊(cè)诩夹g(shù)上是一個(gè)耗時(shí)的過(guò)程,除此之外,它們還降低了可讀性。下面就是我重新設(shè)計(jì)模型后的樣子。

Image title

黃金漸變和黑色背景看起來(lái)非常不錯(cuò)!

我對(duì)這套顏色方案、標(biāo)簽欄上的圖標(biāo)和整體布局都非常滿意。我繼續(xù)按照相同的設(shè)計(jì)指南設(shè)計(jì)了其余的頁(yè)面。這是一個(gè)漫長(zhǎng)而有趣的過(guò)程!

一旦我的頁(yè)面準(zhǔn)備就緒,我就在Adobe XD上制作了一個(gè)原型,并請(qǐng)幾個(gè)朋友進(jìn)行使用并給出反饋。

經(jīng)過(guò)最終的潤(rùn)色,下面是我確定的設(shè)計(jì)界面。

Image title

 

這就是最終的主界面!

所有的頁(yè)面完成后,我將它們導(dǎo)入到Xcode中并開(kāi)始編寫(xiě)應(yīng)用程序代碼。

這就是我今天要分享的內(nèi)容!我希望這篇文章能夠幫助你開(kāi)始在設(shè)計(jì)應(yīng)用程序時(shí)找到靈感,或者幫助你成為更好的設(shè)計(jì)師。

我將以我最喜歡的設(shè)計(jì)名言之一來(lái)結(jié)束這篇文章。

設(shè)計(jì)不在于它看上去如何摸起來(lái)如何,設(shè)計(jì)在于它是確定產(chǎn)品如何運(yùn)作的。
——史蒂夫?喬布斯

原文作者:Harshita Arora

APP開(kāi)發(fā)設(shè)計(jì)