正文

低保真app界面設(shè)計（app低保真圖）

發(fā)布時間：2023-04-22 03:04:04 稿源：創(chuàng)意嶺閱讀： 122

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于低保真app界面設(shè)計的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

專業(yè)抖音報白團(tuán)隊，全類目報白，下店付費！服務(wù)客戶遍布全國，咨詢相關(guān)業(yè)務(wù)請撥打電話：175-8598-2043，或添加微信：1454722008

本文目錄:

宜興UI設(shè)計培訓(xùn)UI要學(xué)什么內(nèi)容/宜興UI培訓(xùn)
如何從零開始設(shè)計一款漂亮的移動APP
App 產(chǎn)品原型設(shè)計用什么軟件

低保真app界面設(shè)計（app低保真圖）

宜興UI設(shè)計培訓(xùn)UI要學(xué)什么內(nèi)容/宜興UI培訓(xùn)

Sketch （UI設(shè)計師必學(xué)殺手級技能，UI設(shè)計利器）：APP低保真原型設(shè)計、高保真原型設(shè)計、APP界面設(shè)計、標(biāo)注、切圖... Adobe Photoshop：圖標(biāo)設(shè)計、照片處理、電商設(shè)計、Banner設(shè)計、網(wǎng)頁設(shè)計、APP界面設(shè)計 Adobe illustrator：圖標(biāo)設(shè)計、插畫設(shè)計、平面設(shè)計、企業(yè)VIS、三折頁、單頁、展架、原型 Adobe After Effects：交互動效設(shè)計、動畫、GIF動圖設(shè)計、APP交互設(shè)計、視頻制作渲染 Adobe Dreamweaver：網(wǎng)頁布局、企業(yè)網(wǎng)站項目、HTML 5 、CSS 3 、微信公眾號、淘寶店鋪 Axure RP Pro：線框圖、網(wǎng)頁／APP原型、交互設(shè)計、高保真原型、APP演示搞DEMO XMind：思維導(dǎo)圖、流程圖、頭腦風(fēng)暴 Ps Play：移動設(shè)計同步工具 Mockplus：APP演示搞DEMO、原型圖 Cutterman：iOS、Android切圖 MarkMan：尺寸標(biāo)注、字體標(biāo)注、顏色標(biāo)注 POP：紙上原型工具

如何從零開始設(shè)計一款漂亮的移動APP

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

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

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

設(shè)計過程：

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

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

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

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

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

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

我們正式開始吧!

用戶流程圖

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

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

矩形用于表示頁面。

方塊用于表示決策(例如，點擊登錄按鈕，向左滑動，縮放)。

箭頭將頁面和決策連接在一起。

用戶流程圖是非常有用的，因為它們給出了應(yīng)用程序如何運(yùn)作的良好邏輯思路。

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

主界面的用戶流程圖。

線框圖

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

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

下面是我繪制的一個線框圖例子。

主界面的線框圖。

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

設(shè)計圖案和顏*調(diào)*板

這是我最喜歡的部分。這就像逛街一樣。有大量的設(shè)計圖案和調(diào)色板可供選擇。我可以去選擇我喜歡的，并感受它們給我?guī)淼囊曈X效果。

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

創(chuàng)建模型

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

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

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

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

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

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

所以我重新設(shè)計了模型并刪除了背景圖，因為生成它們在技術(shù)上是一個耗時的過程，除此之外，它們還降低了可讀性。下面就是我重新設(shè)計模型后的樣子。

黃金漸變和黑色背景看起來非常不錯!

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

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

經(jīng)過最終的潤色，下面是我確定的設(shè)計界面。

App 產(chǎn)品原型設(shè)計用什么軟件

看你們團(tuán)隊的需求怎么樣呢。
中低保真的App原型的話，Mockplus就不錯。提供大批的組件、模板、圖標(biāo)和樣式選擇，App界面設(shè)計基本能夠輕松滿*。*互拖拽就可以實現(xiàn)。對于團(tuán)隊人數(shù)較多，需要協(xié)作設(shè)計和迭代的，它的團(tuán)隊協(xié)作和管理功能，也是很有用了。最近新推出的在線版本，還可以隨時隨地在線編輯，無需下載或存儲，更方便。
高保真類型的原型的話，Sketch之類的軟件就不錯。但可能交互方面就要差點了。

低保真app界面設(shè)計（app低保真圖）