基于 API 驅動的 Web App 概要設計

現在我們已經計劃好了這個小應用的所有的組件，包括各組件的不同狀態，這個計劃工作同網站設計一樣的。現在讓我們充滿信心的開始為每個小組件以及他們的狀態設計視覺模型吧。 如果您在網頁設計過程中，對任何部分有疑問（包括顏色，字體大小等等），都可以直接在 GitHub上面去查看原始的 Sketch 文件，該文件是一個網站設計的原始文件。

首先打開 Sketch 的畫板，并給畫板賦予淺灰色的背景。

頁頭 ( 網站制作頁頭)

由于這只是一個演示項目，所以我并不會花很多的時間來給App 設計一個完整的品牌形象。我會利用 Google字體直接樣式化應用的名字。來做為該應用程序的形象標識。 在這網站建設的實例中，我選擇了 Pacifico字體，該字體在網站設計過程中非常常用，所以如果您電腦里裝了該字體庫，就可以在您的 Sketch里面看看這款字體的效果，電腦上顯示的效果應該和您最終完成的網站建設效果一致。

輸入框 （網站制作輸入框）

現在要設計的就是一個帶有提交按鈕的文本輸入框。 在這里用戶就可以輸入鏈接，而這個鏈接就是他想得到的那個高分辨率標志的 App應用的地址。 根據在線框圖里的規劃，該輸入框應該放于網頁設計的頁頭之下，同時我們要保證他的寬度，以便于該輸入框在桌面電腦到移動手機上都可正常顯示。

顯示框（網站制作顯示區域）

現在就來填加網站制作里最主要的顯示區域，該區域用來顯示由 iTunes API返回的標志圖像。 網站設計的該區域將會用全尺寸的 Twitter 的圖標做為演示。（您也可以直接在這里下載）。

注意：iOS 應用中并不會直接用默認上傳的圖標來顯示。 這個圖標圖像是一個正方形的（就如同我們在上面例子中看到的一樣）。iOS在操作系統里面所使用的會是一個帶了圓角的圖標， 所以對應用來說，我們也必須給 iOS的圖標文件做一個帶圓角的蒙板，就象這樣帶著圓角的正方形一般。我直接使用 Sketch 的圖標模板，該模板是由 Thibaut Ninove創建的，這樣就省了我自己動手做了。

各組件的狀態（網站制作狀態設計）

接下來就創建一些狀態模型以幫助我們來理解該網站頁面處于不同狀態的時候到底會是什么樣子。我們會把這些不同的狀態放置在顯示區域進行展示。

對于零狀態（也即加載初始化頁面時），在這放一個稍微小點的圖標做為占位符，同時加一些指導性的文字告訴用戶如何使用程序。

對于加載狀態，就在顯示區置一純白的頁面背景，同時放一個網頁設計中常用的加載指示符。

對于出錯狀態，只需要在這里放置一些出錯文本信息就好了，該做法和通常的網站設計一樣。

結語

現在為止，我們已經為應用的不同組件做好了漂亮的視覺模型了，下一步就可以開始使用HTML, CSS 以及 JavaScript開始真正的網頁制作了。

不深思則不能造于道。不深思而得者，其得易失。

名人名言- 曾國藩

• By 優聯實達(譯)
• 2015-10-07
• 2385
• 公司新聞，網站開發，網站設計，UI