“手把手教你設計”—12個最佳手機APP介面設計教程

愛原型愛設計發表於2018-03-27

UI/UX 設計確實是需要一定的經驗和學識才能真正在這個行業立足,並不是所有想成為設計師的人最後都能如願以償。他需要對設計有基本的瞭解,清楚設計的基本原則。

使用者介面設計師和其他行業設計面臨一樣的挑戰,那就是使用者是怎麼想他們產品的,是否功能易用?是否美觀讓人愉悅?所以,我們可以看出UI設計是關於平衡可用性和視覺化的。

這篇文章集合了12個最佳手機使用者介面設計的教程,雖然教程偏向初學者,但我相信即使是很優秀的設計師仍然可以從中學到新的東西。

如何使用Photoshop來設計手機UI介面

1. How To Set Up Photoshop For UI Design

如果你是Photoshop的新手,又在做UI設計,這個教程教你如何使用常用的Photoshop設定來達到更好的效果。本文是以iPhone為例項告訴你怎麼在UI設計中使用Photoshop,完全是初學者的教程。

“手把手教你設計”—12個最佳手機APP介面設計教程

 

2. How to Design an iPhone App in Photoshop

這篇文章將為我們介紹使用Adobe Photoshop為iPhone設計一個簡單的3頁目錄列表應用程式。並且將一步步地指導你完成這些步驟,還涵蓋了使用Photoshop設計iPhone應用程式的所有基本原則。

“手把手教你設計”—12個最佳手機APP介面設計教程

3. Design an App Landing Page in Photoshop

在這個教程中,我們可以看到一個應用程式著陸頁的詳細設計過程。設計師使用Tuts + Android應用程式進行演示,強調其功能和優勢,利用多個CTA來完善整個著陸頁的設計。

“手把手教你設計”—12個最佳手機APP介面設計教程

4. How To Design a Mobile App Signup Screen in Adobe Photoshop

如果你想要設計一個像Facebook或者Instagram這樣成功的登入介面設計,那麼這個完全是你必看的基礎教程,視訊中教你如何選擇顏色,設計按鈕以及詳細的步驟來展示登入介面的設計過程。視訊雖然是四年前的,但是裡面的設計依舊不過時。

“手把手教你設計”—12個最佳手機APP介面設計教程

如何使用Sketch來設計手機UI介面

1. A Step-by-Step GUIde for Starting a New App Design Project in Sketch

開始一個新的設計專案是很難的,無論你是自由設計師,還是在知名的產品公司工作,時常會感到迷茫。本文將一步步的教你如何使用Sketch開始一項新的APP設計專案。

“手把手教你設計”—12個最佳手機APP介面設計教程

2. Food App UISketchapp Tutorial / Sketch 4 Tutorial

視訊主要是介紹如何使用Sketch製作一個美食類APP 選單欄UI設計,簡單易懂。

“手把手教你設計”—12個最佳手機APP介面設計教程

3. Sketch 3 for iOS App Design Step by Step

Sketch 3是一款優秀的向量設計和圖形程式,很適合用於設計iOS應用程式。在這個視訊中,設計師使用Sketch 3來設計一個iPhone APP使用者介面。From Idea To Reality: Designing An App With Sketch And Xcode 這篇文章是進階版的APP 設計教程,從理論到具體的例子講解,非常受益。

“手把手教你設計”—12個最佳手機APP介面設計教程

4. Sketch App Tutorial – Build a music app landing page in Sketch

Sketch 作為當下主流的設計工具,似乎有超越Photoshop的趨勢。本視訊介紹的是如何使用Sketch來製作一個音樂APP登入頁設計,可以說是手把手的教程,每一步都非常的詳細細緻,非常適合初學者。

“手把手教你設計”—12個最佳手機APP介面設計教程

看了前面的音樂類APP登入介面的教程, 你是否也想設計出一個屬於自己的音樂APP呢?接下來我將介紹如何通過結合Sketch和原型設計工具設計一款音樂類的APP(Prototype an music app with prototyping tool)

TIMING

這款原型音樂類的APP在Mockplus設計大賽中斬獲頭籌,設計師通過採用Sketch以及Mockplus的結合,做出了高保真原型。這個APP主要體現一種復古的視覺效果,磁帶轉動的效果是這次視覺上的設計重點。

“手把手教你設計”—12個最佳手機APP介面設計教程

必讀的手機介面UI設計好文

1. The 10 principles of mobile interface design

計算機和手機是人們日常工作和生活必備的通訊工具。但在許多方面,手機往往更加強大,手機更加的私人化,與我們的聯絡更緊密。鑑於移動手機和計算裝置之間的許多差異,移動設計與桌面設計的設計大不相同。這篇文章詳細的向我們介紹了移動介面設計的基本原則,幫助設計師們開發移動應用程式的獨特力量。

2. UI Design Do’s and Don’ts

iOS良好的優化了使用者面設計,並提供給使用者優質且具有吸引力的使用者體驗。在開始你的iOS設計之前,一定要清楚Apple官網的關於iOS常見的設計原則,來在增強手機應用的可用性和吸引力。更多關於優秀的iOS介面設計,請閱讀iOS人機介面指南

3. How to use colors in UI Design

顏色可以說在UI設計中至關重要。用的好,那就成功了一半,用不好,可能導致整個應用失敗。在你的配色方案中,最好只使用三種主色跳,使用的顏色越多。越難實現平衡。這篇文章不但提到基礎的用色知識加上例項解釋,還有常用的工具介紹。

“手把手教你設計”—12個最佳手機APP介面設計教程

4. 10 Best APP UI Design for Your Inspiration

每位UI設計師都夢想著做出最出色的介面(UI)設計, 能夠脫穎而出的手機介面設計則少之又少。設計師們在設計UI介面時,往往會參考來自不同設計師的設計,這篇文章列出了2017年最出色的的10個手機應用介面設計範例,給設計師們謀福利。

“手把手教你設計”—12個最佳手機APP介面設計教程

總結

移動設計不斷地在發展,如果你想跟上這個時代,你需要不斷閱讀和觀看高質量的教程或文章。在本文中,我收集12個最佳教程的示例來教初學者如何學習手機UI介面設計,希望你們能從中受益。


相關文章