交互設(shè)計-原型制作

1、交互設(shè)計全流程解析EXPLANATION TO ALL PROCESSES OF INTERACTION DESIGN 步步為贏09原型制作交互原型是設(shè)計師通過設(shè)計目標(biāo)分析、競品分析，找到設(shè)計思路以后，運用設(shè)計原則、交互控件，畫出的展現(xiàn)設(shè)計方案的最終交付物?？梢哉f，交互原型是設(shè)計前期所有準(zhǔn)備的濃縮和精華。一份專業(yè)的交互原型，能夠清晰地展現(xiàn)方案的各種細(xì)節(jié)。目錄什么是交互原型交互原型的作用交互原型的制作9.1 什么是交互原型交互原型是設(shè)計師在接到產(chǎn)品需求之后，經(jīng)過一系列分析，將抽象的文字產(chǎn)品需求轉(zhuǎn)化成具體的圖形產(chǎn)品方案的產(chǎn)物。交互方案作為交互設(shè)計師日常最頻繁的產(chǎn)出，會在產(chǎn)品、UI、開發(fā)、測試同事中

2、流轉(zhuǎn)，因此也成為他們評判一個交互設(shè)計師能力的重要依據(jù)交互原型分為靜態(tài)原型和動態(tài)原型9.1.1 靜態(tài)交互原型靜態(tài)原型的主要作用，是用于團(tuán)隊內(nèi)部協(xié)作，它的作用是傳達(dá)需求，本質(zhì)上是一種溝通工具制作靜態(tài)原型有兩種工具可供使用：axure和sketchAxure因為可以使用站點地圖來組織頁面，因此比較適合于大型的、有多個頁面的方案Sketch畫原型效率高，輸出PDF，美觀、全局、不易看漏內(nèi)容，無設(shè)備和網(wǎng)絡(luò)限制，方便閱讀。適合于小型的、功能單一的方案 剖面圖閱讀步驟：1. 讀圖名、比例；2. 讀各層內(nèi)部構(gòu)造；3. 標(biāo)高與高度方向尺寸標(biāo)注；4. 詳圖索引符號；5. 其他。三、 AutoCAD繪制剖面圖 （步

3、驟）1. 設(shè)置繪圖環(huán)境；2. 繪制定位軸線、室外地坪線、樓面位置線；3. 繪制墻體、樓板等構(gòu)件；4. 繪制門、窗并補充細(xì)節(jié)；5. 標(biāo)注；6. 打印出圖 。 用正投影的方法，以較大的繪圖比例將房屋的細(xì)部詳細(xì)的繪制出來的圖樣，稱為建筑詳圖。 索引符號和詳圖符號 詳圖與平、立、剖面圖的索引關(guān)系是通過詳圖符號與詳圖索引符號來建立的。8詳圖編號12詳圖編號14詳圖所在圖圖號（同一張圖上）（不同圖上）22圖冊編號25頁號（用標(biāo)準(zhǔn)圖集）98J6索引符號：直徑為10毫米的細(xì)實線圓，細(xì)實線水平直徑和引出線及編號。被剖切部位粗實線， 引出線表示剖切后投影方向 剖面詳圖索引符號：詳圖符號：直徑為14毫米的粗實線園，

4、細(xì)實線水平直徑及編號。512詳圖編號14基本圖所在頁號（詳圖與基本圖不在一張上）（詳圖與基本圖在一張上）外墻身詳圖的閱讀. 圖名、比例;. 墻體軸線、墻厚、墻體與軸線的關(guān)系;. 各構(gòu)件的斷面形狀、尺寸、材料及相 互連接方式等。. 各部分做法;. 標(biāo)高與高度方向尺寸標(biāo)注;. 詳圖索引符號;. 其他。二、樓梯詳圖 1. 詳圖的名稱、比例; 2. 詳圖符號及其編號以及需另畫詳圖的索引符號; 3. 建筑構(gòu)配件的形狀以及詳細(xì)的構(gòu)造、 層次，尺寸; 4. 詳細(xì)注明各部位和各層次的用料、做法、顏色以及施工要求等; 5. 必要的定位軸線及其編號; 6. 必要的標(biāo)高（這里指相對標(biāo)高）. 三、AutoCAD繪制樓

5、梯詳圖（步驟） 樓梯剖面詳圖的繪制：1.設(shè)置繪圖環(huán)境;2.繪制定位軸線、室外地坪線、樓面位置線、梯段位置線等;3.繪制墻體、樓板、梯段等構(gòu)件;4.繪制門、窗并補充細(xì)節(jié); 5.標(biāo)注;6.打印出圖.小 結(jié)1.了解制圖標(biāo)準(zhǔn)；2.掌握建筑施工圖的閱讀方法；3.掌握計算機繪制建筑施工圖 的方法和技巧。 9.1.2 動態(tài)交互原型動態(tài)原型的主要作用，是產(chǎn)品方案的動態(tài)演示和供可用性測試操作時使用，本質(zhì)上是有一定功能局限的可操作模型蘋果公司出品的Principle軟件在線的動態(tài)交互稿制作網(wǎng)站：Flinto9.2 交互原型的作用交互原型文檔的主要“目標(biāo)用戶”，是產(chǎn)品、UI、開發(fā)和測試。產(chǎn)品經(jīng)理： 主要關(guān)注設(shè)計方案

6、是否滿足業(yè)務(wù)和用戶需求。交互設(shè)計師與他們討論產(chǎn)品規(guī)劃及業(yè)務(wù)需求后，結(jié)合用戶需求，分解關(guān)鍵因素，最終歸納出設(shè)計目標(biāo)。而交互原型正是整個設(shè)計思路的闡述媒介。視覺設(shè)計師：他們需知道產(chǎn)品定位是怎樣的？有哪些頁面要設(shè)計？頁面間的跳轉(zhuǎn)是怎樣的？各頁面各元素包括什么狀態(tài)？遇到特殊情況（數(shù)據(jù)加載、網(wǎng)絡(luò)異常、極端情況等）如何設(shè)計？9.2 交互原型的作用交互原型文檔的主要“目標(biāo)用戶”，是產(chǎn)品、UI、開發(fā)和測試。開發(fā)人員：他們需要知道，產(chǎn)品要實現(xiàn)多少功能？多少頁面？頁面間是怎么跳轉(zhuǎn)的？異常情況怎如何處理？哪里需要動效？動效的效果是怎樣的？頁面的運行規(guī)則（如加載規(guī)則）是怎樣的？測試人員：他們需參考交互原型梳理測試用例

7、，測試用例需覆蓋所有功能、使用場景、操作行為、產(chǎn)品細(xì)節(jié)，須保證上線無bug，或是少bug狀態(tài)。9.3 交互原型的制作交互原型主要包含以下3部分：項目概述方案展示設(shè)計分析（非必需）9.3.1 項目概述主要展示該需求的基本信息和迭代說明9.3.2 方案展示交互原型中必須包含以下信息： 原型展現(xiàn)完整的流程；界面以及界面中的元素展現(xiàn)需求的所有功能點；界面中元素的各種狀態(tài)說明；元素操作后的效果；異常、極限狀態(tài)說明。9.3.2 方案展示Axure：一個頁面只展現(xiàn)一個界面或分支流程9.3.2 方案展示Sketch：一個頁面展現(xiàn)所有流程和界面9.3.2 方案展示高質(zhì)量的交互原型的6點建議：同一頁面的不同狀態(tài)最

8、好在一個頁面展示（不要忽略極端情況）。頁面之間要對齊，左右排列的頁面頂端對齊，上下排列的頁面左對齊。界面絕大多數(shù)元素均使用黑白灰，界面色值不超3種。越深的部分代表這個部分越重要。特殊情況下需要強調(diào)某個元素，則可以使用彩色。界面中的控件，應(yīng)遵守第八章中介紹的蘋果和谷歌的控件規(guī)范。規(guī)范的控件會提升你的交互原型的專業(yè)度。9.3.2 方案展示高質(zhì)量的交互原型的6點建議：界面中的圖標(biāo)，可以去iconfont（/）尋找合適的圖標(biāo)進(jìn)行示意。千萬不要使用繪制粗糙的圖標(biāo)，這會降低你的交互原型的質(zhì)量9.3.2 方案展示高質(zhì)量的交互原型的6點建議：如果是為手機應(yīng)用繪制交互原型，則可以使用iPhone8的屏幕分辨率，即375px*667px；如果是為電腦網(wǎng)頁繪制交互原型，則可以使用1920寬度的分辨率，然后考慮界面在更小的界面下應(yīng)該如何呈現(xiàn)。9.3.3 設(shè)計分析對于一些需求本身比較龐大，涉及到的人員比較復(fù)雜的情況，可以在交互原型中加入設(shè)計分析的部分。思考題繼續(xù)第六章中的需求：某APP要做一個紅包活動，只要是最近30天內(nèi)在APP內(nèi)買