2025-8-19 杰睿
每個設計師都有自己獨特的設計呈現方式。根據項目的不同，設計師會使用不同的方式展示他們的設計。Clickdummy 原型是展示屏幕流程最常用的方式，方便簡潔。通常情況下，設計師會以“編號+標題”的格式為所有屏幕命名，并通過導出結果中 JPG 文件的順序來表達屏幕之間關系的邏輯。
我很高興能使用像 Invision App 這樣的工具來理清我的設計。然而，ClickDummy 原型在構建大型復雜的軟件項目和功能性應用程序時并不理想。有時，我們會將屏幕放在 Sketch 文件中的不同頁面中，以使結構更清晰，但卻失去了整體的視覺效果。當你向項目經理、客戶和開發人員展示你的設計時，你會發現這個過程效率低下。
我們需要一個高效、流暢的流程來優化演示和交接。我的經驗是線框圖和UI的流程。這是一種非常新穎的方式，但效果很好。
我們知道 Behance 和 Dribbble 上有很多精美的線框和 UI 流程。其實很多設計師也在做同樣的事情。我在上海MINGLabs工作的時候，我的法國設計師同事 Lucas 教給我一個方法，它不僅易于理解，而且美觀高效，可以作為交接的 UI 呈現流程。后來，這個方法在我的遠程自由職業中得到了運用，并不斷改進。這對降低溝通成本非常有幫助。
當然，我的應用和網站都是用 Sketch 設計的。我建議從第一個線框圖開始設計流程。之后再設計主頁和兩三個輔助頁面。
您可以創建一個新的畫板。畫板大小要足夠大，能夠覆蓋所有屏幕。這樣做的目的是為了更容易添加線條和注釋，也方便在最后時刻導出完整流程圖的概覽。不過，現在沒必要添加屏幕數量。等您心中有了概覽之后，再添加也不遲。
流程包括 5 個組件：
流程的結構是從左到右組織的。頁面位置越靠右，層級就越低。我的習慣是把首頁之類的第一頁放在左側。設計流程如下：
線框和 UI 流程改善了溝通。但它并不完美，實際上有時甚至有點令人毛骨悚然。
蘭亭妙微(www.newchinaweekly.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。