關(guān)于原型,有太多故事了。說(shuō)起快速的原型制作(區(qū)別于軟件工程的快速原型法),應(yīng)該以文本文檔/富文本文檔(如Word)為主。因?yàn)椋装、草圖雖然快但不易保存,HTML雖然豐富但制作慢,一些原型工具,如Axure,則效率也低,使用也復(fù)雜。
最初設(shè)計(jì)的時(shí)候,我是以Word為主的,就是打表格(順帶一句,白鴉是PPT,便于演示和簡(jiǎn)單的效果)。Word 畫表格十分方便,而且在溝通中也比較高效(批注)。漸漸的也有了一些習(xí)慣(很山寨)。
布局
打表格(要用繪制功能)。默認(rèn)的 A4 頁(yè)面瀏覽基本足夠。有時(shí)在處理 100% 表格時(shí),會(huì)用 Web 版式,但用 Web 版式閱讀時(shí)總覺(jué)得不那么自然,比較少用。
表格也常用于模擬真實(shí)的數(shù)據(jù)表格(應(yīng)用上各種樣式)。
常用的:?jiǎn)卧窬又校ㄋ胶痛怪保、單元格背景色(突出重點(diǎn))。
文字內(nèi)容
直接打字,針對(duì)鏈接,用藍(lán)色(#00F)加下劃線,基本實(shí)現(xiàn)。字的大小,用小五表示12px,用10表示13px,用五號(hào)(默認(rèn))表示14px。字體根據(jù)具體情況,一般通用 Arial。加粗就是 Ctrl+B。
常用的:對(duì)齊、加粗、字號(hào)、顏色和下劃線、Tab和中文空格(用來(lái)占位,和初步排版)。
圖片內(nèi)容
一般結(jié)合單元格居中,寫上圖片的內(nèi)容作為占位。表示這里放個(gè)圖片。有時(shí)候也會(huì)結(jié)合截圖軟件,截圖軟件的好處是可以保存到剪貼板,然后再 Ctrl+V 粘帖到文檔中,這樣不會(huì)生成額外的圖片文件(HTML就這點(diǎn)不好)。
有時(shí)候針對(duì)復(fù)雜的細(xì)節(jié),還可以用Photoshop畫好,再粘帖進(jìn)去。不過(guò)因?yàn)槁,非常少用?/p>
表單內(nèi)容
這是所有網(wǎng)頁(yè)、交互的重要組成部分。有一些自己瞎定義的符號(hào)(還好比較一目了然),后來(lái)有位同事入職后也自創(chuàng)了一套。目前我在用的主要如下:
- 輸入框:[ ]、[請(qǐng)輸入搜索關(guān)鍵詞...],類似這樣的。
- 下拉框:[abc ▼]、[abc v],類似這樣的,用 charmap 呼喚出字符映射表拷貝。有時(shí)候?yàn)榱苏鎸?shí)一點(diǎn),還會(huì)把向下的三角改為灰色。
- 復(fù)選框:[ ]表示未選中,[√]表示選中。有時(shí)也會(huì)用[·],來(lái)表示選中,簡(jiǎn)單,但不那么明顯。
- 單選框:( )表示未選中,(·)表示選中。
- 按鈕:文字加灰色的背景色(字符底紋),這在Word中只要按一下。
- 其他:發(fā)揮你的創(chuàng)意(比如 disable 可以加灰色背景)。
其實(shí)可以利用Word的控件,但是控件的文案要在另外一個(gè)小窗體中輸入,總嫌麻煩。
其他
還有一些小交互,比如收攏、展開(用[+]和[-]),關(guān)閉按鈕(用 × 字符,或字母X),最小化(就是一個(gè)下劃線)之類。還有,有時(shí)候不用表格,用一行“-”來(lái)表示分割線。
這個(gè)其實(shí)可以形成規(guī)范,關(guān)鍵是要能夠真正的在保證有效傳達(dá)的情況下,提高畫原型的效率。
附上一個(gè)剛才花了10分鐘畫的 MT 后臺(tái)寫日志的線框圖(wireframe),共勉。
本文鏈接:http://m.95time.cn/design/doc/2009/6424.asp
出處:JunChen
責(zé)任編輯:bluehearts
|