作為互聯(lián)網(wǎng)行業(yè)的設計師，不僅僅需要完成用戶界面（User Interface，簡稱 UI）的視覺設計，還應該具備產(chǎn)品思維，思考具體場景下的用戶體驗（User Experience，簡稱 UX）。因為某個功能點在不同位置的擺放和呈現(xiàn)方式都可以影響用戶使用產(chǎn)品時的感受。在很多互聯(lián)網(wǎng)企業(yè)里，往往會有產(chǎn)品經(jīng)理或者交互設計師來完成 UX 方面的設想和探索，UI 更多的是完成視覺呈現(xiàn)的部分。但是未來 UI 和 UX 的界線將越來越模糊，以后互聯(lián)網(wǎng)行業(yè)的設計師更多的會有一個統(tǒng)一叫法——產(chǎn)品設計師。他們將獨立完成從 0 到 1 完成整個產(chǎn)品的設計，這會是未來的趨勢。本文將介紹一種從0到1設計 app 的方法，是我本周在 YouTube 上看到的一個視頻系列，該設計師描述了一個 app 從構思到完成交互稿的整個過程。
教程中舉例的 app 是一個計時工具，用它來記錄任何一種日?；顒拥臅r間開銷，隨著次數(shù)的累計，它會計算出你投入在該活動中的平均用時。
第一步：手繪完成 app 的基礎 UI，并用線條將頁面串起來。和很多人想象的不一樣，設計師不要一上來就用繪圖軟件開始設計，而是應該用手繪來把所有頁面先初步確定下來。手繪的好處是，快速、試錯成本低，而且讓你把注意力放在 app 的基礎功能以及邏輯上，而不是想辦法把界面做得完整規(guī)范。你可以選擇在紙上畫，也可以使用 iPad 上的繪圖 app，比如 Linea。在紙上先畫出多個適當比例的矩形來表示手機屏幕，如圖1所示。
然后確定 app 的整體功能架構，進而決定首頁的功能點。一開始不可能面面俱到，所以不要用腦思考，要用筆頭思考，先邁出步子，因為之后肯定會再做改進的。把必要的按鈕先畫出來，再順著這些按鈕的功能，畫相應的界面。你在畫的過程當中，可能會發(fā)現(xiàn)別的界面似乎忘了考慮某個細節(jié)，或是發(fā)現(xiàn)了更簡單的方法，比如按下了暫停鍵，就得想到它其實會馬上消失，變成播放鍵和停止鍵。這就是手繪草稿圖的好處——讓你專注于思考本身。當每一個功能按鈕都有對應的界面之后，第一步就算完成了。
第二步：將手繪 UI 設計成可點擊的原型圖。這一步就要開始運用軟件來操作了。本教程涉及到 2 款界面設計的軟件——Sketch 和 Flinto，分別負責是界面設計和交互動效設計。Sketch 做界面設計功能非常出色，更方便的一點是，它支持很多插件的使用，能將設計稿方便地導入 Flinto（這是近年來剛出現(xiàn)的制作動效以及頁面切換效果的軟件，操作簡單且功能強大）。
給手繪圖稍加潤色后（比如給按鈕上色以及添加一些必要的文字信息），將它們導入 Sketch 軟件里，把一個個界面分別放在手機屏幕大小的畫板里，如圖3。
再導入 Flinto，命名好各個界面，按照產(chǎn)品邏輯給按鈕設置界面跳轉，將所有界面關聯(lián)。在此過程中一般會發(fā)現(xiàn)在第一步里遺漏的細節(jié)，可以直接在軟件內補畫。完成之后，要站在用戶角度去使用幾次，觀察設計是否有不合理之處。正因為是粗糙的手繪圖，就算發(fā)現(xiàn)缺點也可以很快進行修改。
第三步：按照原型圖，畫出界面初級 UI。經(jīng)過前兩步，把 app 的所以功能流程都走通之后，這一步就要開始完善 app 的顏值了。可以直接在手繪圖上加工（記得先隱藏那些鏈接），一步步用標準的圖形、線條替代手繪草稿。這個階段的 UI 可以想辦法設計得精致，包括尺寸也可以苛求精確，不過后續(xù)也可能發(fā)現(xiàn)缺陷再調整和修改。效果如圖5.
第四步：根據(jù)產(chǎn)品的特點，用 Flinto 制作相應的頁面內動效以及不同頁面之間的過渡效果。具體的制作細節(jié)就不在此贅述，不同的設計師會有不同的想法。好的動效確實能給使用者帶來愉悅和驚喜的使用體驗。要不斷提高 Flinto 的使用技能，掌握更多的表現(xiàn)手法。設計完成后，可以用軟件內的預覽器多次操作，之后，通過 Flinto 的手機端 app（只要和電腦連接在同一 Wi-Fi 網(wǎng)絡中就能在手機上操作電腦中設計的界面）實際操作幾次頁面，查看是否合理和流暢。如圖6.
一個簡單的 app 就這樣設計完成了。
