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