<noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>

    <noframes id="jjr3b"><span id="jjr3b"><span id="jjr3b"></span></span>

    <noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>
    <form id="jjr3b"></form>

    <noframes id="jjr3b">
      18868949445

      江門網絡公司:如何用Photoshop構建iOS應用程序接口

      日期:2020-03-28 閱讀:344   作者:江門網站設計開發公司

      就像建立一個網站,移動應用程序的設計是一個非常詳細的過程。雖然這可能不是社會學的火箭手術(有些人可能會說不是),但即使是最好的應用程序設計師也會花費數年的時間研究這一技術,而且還有很多需要學習的地方。這兩個網站的早期階段之一&移動應用程序設計被稱為線框。

      這是一個基本模板的布局,其中包括最重要的頁面元素。內容應保持在最低限度的使用,在必要的基礎上。線框將注意力直接集中在體驗上。-基本上用戶將如何與應用程序交互。許多設計師更喜歡用手畫這些,但總有一個選擇來設計線框使用圖形軟件。

      在這篇文章中,我想提供一個iOS應用程序線框入門指南,特別是如何完成這一任務。使用AdobePhotoshop。其他程序,如GIMP或Sketch也工作得很好。目標將是創建一個分層的線框,可以編輯和重新安排,以適應一個工作的移動應用原型。

      線框概述

      記住最好的經驗法則是簡單。對于任何一個應用程序,線框都是基于少數視圖構建的。這些視圖中的每一個都可以是來自列表視圖、社交提要、用戶配置文件…的任何類型的接口。有很多選擇。


      剛開始的時候,你可能會嘗試從你最喜歡的iOS應用中逆向工程線框。這將幫助您專注于屏幕上最重要的方面,以便您可以將這些元素轉換為自己的想法。簡單的線框實際上是關于交流的。理想情況下,您希望將您的想法傳達給開發人員、設計師,甚至潛在的用戶。


      江門網絡公司從用戶體驗的角度來考慮線框設計。解決UX問題就是問正確的問題。應用程序的主要目標是什么?完成這個目標(或目標)需要多少個屏幕?在這些屏幕之間移動的最直觀的方法是什么?

      同樣值得注意的是,在制作線框時,您不需要遵循精確的尺寸。目標不是成品--事實上,這通常是應用程序的第一個也是最粗略的草稿。如果你有小圖標或按鈕的想法,可以隨意將它們添加到線框中。但要保持你的思想靈活,愿意隨時改變。


      快速迭代是良好的線框的基石。迅速計劃,毫不猶豫地起草你的想法。這將幫助您確定哪些是有效的,哪些是不起作用的。

      UI/UX故事板

      故事板通常與動畫和電影相關。藝術家將繪制每個主要鏡頭的草圖,以展示故事情節的運行和觀眾在每個場景中看到什么。用戶體驗設計師也采用了同樣的想法來解釋網站和移動應用程序是如何工作的。

      這一步沒有必要,但它可以帶來很多好處。它為程序員提供了一個工作圖表,解釋了某些按鈕將如何在不同的屏幕之間轉換。故事板也意味著充實的想法,并獲得計劃不良,不直觀的元素,以便他們可以固定之前,創造最后的概念。拋光的故事板也可以稱為原型.

      Xcode有一個小的故事板界面,但它需要一個更精細的編程術語調色板來連接按鈕和屏幕顯示。如果你只專注于UI的設計,那么最好是用手繪的線框或Photoshop這樣的工具來設計故事板。這只是一個用箭頭連接屏幕來決定它們之間的流動的問題。



      您還可以添加一些書面說明,說明視圖之間的轉換效果,以及它們將如何根據應用程序層次結構的向前或向后變化。故事板應該用低保真度的線框來講述應用程序的故事。您將節省時間,不必擔心顏色和紋理,同時也主要關注用戶體驗和內容演示。

      Photoshop中的線框

      雖然您的工作流程可能有所不同,但我想為希望嘗試線框的初學者提供一些提示。用手開始工作從來不是個壞主意,因為你可以更直接地工作,更快地執行想法。但是當轉換為Photoshop時,盡量不要擔心標題欄和標簽欄的具體尺寸。

      相對尺寸通常對低保真線框來說是足夠好的。使用不同的形狀工具構建每個布局,以節省一點時間。您可以設置絕對寬度/高度值,以獲得一個準確的圓形或方形形狀的需要。因此,使用典型的iPhone應用程序線框,您可以創建一個320×480長方形,表示整個屏幕。然后,您可以將較小的矩形放入此框架中,表示狀態欄、標題欄等。

      雖然在這一點上你不應該關心確切的顏色,但是試著堅持一個相對的配色方案。例如,您可能會計劃標題欄中的按鈕應該比標題欄本身的顏色更深?;蛘哌@些按鈕可能是相同的顏色,而是使用一個1 px外部邊框。不要太沉迷于細節,但也要盡量避免使用相同(或沖突)的顏色將一堆形狀放在一起。

      一個快樂的媒介在沒有細節和奢侈細節之間的某個地方。

      分組與組織

      一旦創建了第一個線框視圖,將所有重要的層組合成一個層組。從這里開始,您可以復制組并重新排列所有內容,以生成另一個視圖。這將節省您從零開始重新創建重復元素的時間。



      但組織是也很重要當你需要回來編輯的時候。再沒有比PSD更令人生畏的了,到處都是層次分明的東西。很難預測何時需要編輯或更新線框模型。保持您的所有層的組織,您將有一個更容易的時間,如果和何時這些編輯是需要的。

      另一個想法是為不同的視圖模式創建單獨的PSD文件。如果你有一個單獨的PSD的空間,為人像和景觀的看法,那么就太棒了!但是如果你的線框需要很多不同的視圖,那么很難將它們放入一個大文件中。這也適用于在縱向和景觀模式下為iPad線框創建新的PSD。

      樣本PSD免費

      我已經包括了我自己的PSD免費,其中概述了一個非常簡單的iOS任務應用程序。為了簡單起見,我已經創建了4條屏幕線框,但您可以看到這個過程將如何外推以包括每個可能的屏幕。


      請隨意下載PSD文件的副本,并在您自己的項目工作中使用類似的方法。就我個人而言,我覺得從手繪素描開始,然后進入數字領域比較容易。這完全取決于你作為一個設計師的喜好,以及什么是最容易頭腦風暴。

      iOS 7-應用程序-線框-模板(200 kb壓縮文件)

      其他資源

      網上有數百篇文章,詳細介紹了iOS應用程序的設計過程。一開始看起來很復雜--可能是因為像素匹配一開始令人困惑和惡心。一旦你適應了這個過程,每個新的移動應用程序就會成為一個非常有趣和有創意的項目。


      网赚团队