- 動靜有法 Sketch+Principle UI設(shè)計基礎(chǔ)教程
- 張怡琪(張小碗兒)編著
- 980字
- 2021-04-16 16:13:22
1.2.2 交互設(shè)計
在頭腦風(fēng)暴之后,產(chǎn)品經(jīng)理會將大家的想法整理成需求文檔,并通過郵件發(fā)送給項目組的每一個人。UI設(shè)計師在接到詳細的需求文檔之后,需要將文檔以交互稿的形式呈現(xiàn)給項目組。注意,交互稿階段主要是將大家對產(chǎn)品的最初想法落在現(xiàn)實中,而不是做出一套完成的交互設(shè)計。交互設(shè)計分為兩個階段,一是前期的交互草稿(低保真原型)階段,二是交互精稿(高保真原型)階段。
交互草稿(低保真原型)階段,也需要大家以討論的形式完成,可以用便簽將需求文檔的大概交互內(nèi)容繪制出來,然后按照交互操作的邏輯順序,將它們粘貼到一個大的玻璃墻或者黑板上,也可以直接在一張大白板上用馬克筆直接將交互稿繪制出來,大家一起討論這套交互邏輯是否順暢。


交互草稿不需要畫得很細致,只需把操作邏輯和步驟交代清楚就可以了,通常會用簡單的線條勾勒。在此階段,要體現(xiàn)出每個界面存在的意義,也就是用戶想在當(dāng)前界面希望看到的內(nèi)容,并且在擺放各個界面的過程中,要表達出界面與界面之間的優(yōu)先級。即使進行到了這一步,團隊還是要不斷地進行討論,不斷地將之前的定論推翻,思考有沒有更好的邏輯和操作模式。因為在草稿上進行手繪交互稿的設(shè)計比較快捷,也比較方便修改,所以大家會不斷地根據(jù)交互草稿進行流程上的討論和修改。
不要小看這一步大家的討論結(jié)果,這是項目前期最初確定的邏輯,以后的產(chǎn)品設(shè)計和程序制作都會按照這個基本的邏輯來實現(xiàn)。如果在早期沒有及時發(fā)現(xiàn)并解決問題,在產(chǎn)品制作過程中或完成后再發(fā)現(xiàn)問題、進行修改,勢必會影響產(chǎn)品整體的上線時間及項目組的人力和物力。

在交互精稿(高保真原型)階段,高保真原型圖通常是通過計算機軟件輔助完成繪制的。
初步確定了交互草稿之后,要選擇一款能實現(xiàn)交互設(shè)計的軟件,將草稿上面的內(nèi)容更精準(zhǔn)地表現(xiàn)在高保真原型圖上。本書后面會教大家用Sketch來繪制原型圖。除了Sketch,還有Axure RP、XD、墨刀、POP等軟件,都可以用來繪制原型圖。高保真灰度線框圖的界面布局及交互邏輯效果要比低保真交互圖更細致,實際效果也更接近真實產(chǎn)品,最終制作成產(chǎn)品交互演示Demo,能幫助團隊或者客戶更好地體驗?zāi)P汀Mㄟ^Demo的展示,還會發(fā)現(xiàn)很多交互設(shè)計中存在的問題,項目組還需要繼續(xù)討論這些問題并修改交互稿。
注意,高保真交互原型圖要展示一個完整的交互效果,設(shè)計師一般會將它在團隊中或者客戶面前展示,所以要注意它的界面規(guī)范和美感。如下頁圖為利用Sketch繪制的發(fā)現(xiàn)音樂App高保真原型圖。

- Java語言程序設(shè)計
- Google Apps Script for Beginners
- Learning Firefox OS Application Development
- JavaScript by Example
- Interactive Applications Using Matplotlib
- TradeStation交易應(yīng)用實踐:量化方法構(gòu)建贏家策略(原書第2版)
- QGIS By Example
- Python時間序列預(yù)測
- 表哥的Access入門:以Excel視角快速學(xué)習(xí)數(shù)據(jù)庫開發(fā)(第2版)
- C#應(yīng)用程序設(shè)計教程
- Express Web Application Development
- Scratch3.0趣味編程動手玩:比賽訓(xùn)練營
- Orleans:構(gòu)建高性能分布式Actor服務(wù)
- C++程序設(shè)計教程
- 你真的會寫代碼嗎