設(shè)計方法之原型設(shè)計

原型設(shè)計Prototyping

優(yōu)點:

1.直觀展示產(chǎn)品的設(shè)計思路,深入定義解決方案,加深對產(chǎn)品的理解?

2.代入產(chǎn)品與用戶交互的情景,對預(yù)設(shè)交互方式進行可行性測試,檢驗使用順序、場景等方案

?3.快速迭代改進并細化交互行為,縮短產(chǎn)品上市時間

流程:

點子/靈感設(shè)計(Idea):產(chǎn)品亮點,核心競爭力,創(chuàng)新的架構(gòu)/交互形式

概念設(shè)計(Concept):明確使用場景,收集素材,構(gòu)思可交付內(nèi)容

功能圖(Functional Map):滿足目標用戶需求的主要功能概要及優(yōu)先級排序

架構(gòu)圖(Framework):框架細化至內(nèi)容,梳理信息與布局

流程圖(Flow Chart):信息傳遞途徑,頁面流,關(guān)鍵任務(wù)操作流程

UI流程(UI Flow):UI模式和組件等頁面元素細節(jié)的交互詳情,說明限制(范圍值/極限值)和狀態(tài)(默認/常見/特殊)

線框圖(Wireframe):動作腳本中概念模型轉(zhuǎn)化成的視覺模型,在故事板的基礎(chǔ)上繪制

原型(Prototype):產(chǎn)品功能和內(nèi)容的示意圖,包含靜態(tài)頁面樣式和動態(tài)操作效果,基本形式包括紙質(zhì)原型、位圖原型、可執(zhí)行的交互式文件

1.低保真原型(Low-fidelity Prototype):

特點:無顏色,無截圖,主要展示信息布局、內(nèi)容層次、操作流程

可用紅色標注操作方式反饋,藍色標注界面布局說明文字

利于測試新表單配置或新UI方法的屏幕流程、頁面跳轉(zhuǎn),快速并專注于當(dāng)前任務(wù),不被無關(guān)設(shè)計方面干擾。

2.高保真原型(High-fidelity Prototype)/視覺稿(Mockup):

利于獲得擬用視覺設(shè)計中顏色、布局或字體的細節(jié)反饋;測試交互有效性以及用戶界面中的交互動畫。

注:可添加原型變更日記提高效率,如日期、版本號、變更內(nèi)容及原因等


文檔內(nèi)容及輸出成果:

1.目錄:各元素(模板)

2.目標人群說明

用戶定位分析

3.需求分析

思維導(dǎo)圖及架構(gòu)分析

4.功能概述

流程圖及功能點分析

5.交互優(yōu)化,完善功能

交互界面與元素說明

6.線框圖、界面

原型圖與視覺效果說明

7.界面間關(guān)系、跳轉(zhuǎn)邏輯

交互說明或動態(tài)演示Demo


Meowmaid閱讀筆記匯總整理

主要來源于《DELFT DESIGN GUIDE (戴爾夫設(shè)計指南)》《ABOUT FACE 4 (交互設(shè)計精髓)》《不止情感設(shè)計(Inside Emotional Design)》《破繭成蝶:用戶體驗設(shè)計師的成長之路》等

Thank you for your time~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容