原型設計圖-如何進行web頁面原型圖設計
互聯網產品設計過程中,原型圖的常用格式,我見過6種以上。
它們的優點和缺點,介紹如下:
可以在另壹臺電腦上,閱讀和編輯Axure原型圖;
在Axure預覽模式下,可以在瀏覽器左側顯示網頁的目錄;
Axure軟件有Mac版本和windows版本。
如果接收文件同事的電腦,沒安裝Axure,就打不開了;
在手機微信聊天窗口上,不能直接閱讀Axure原型圖;
Axure低版本,不能打開高版本的Axure文件。
可以在另壹臺Mac電腦上,閱讀和編輯Sketch原型圖;
Ui設計師,可以直接在Sketch裏面,把原型圖,做成高保真的Ui設計稿;
可以導出PDF格式的多頁面PDF原型圖。
只能在Mac電腦上,閱讀和編輯。暫時沒有windows版本的Sketch軟件,不支持windows電腦編輯;
不能在手機微信聊天窗口上,直接閱讀Sketch原型圖;
Sketch低版本,不能打開高版本的Sketch文件。
可以在Mac或Windows電腦上,閱讀和編輯PPT格式的原型圖;
在手機微信App聊天窗口上,直接閱讀PPT格式的原型圖;
可以通過其它軟件,將畫好的原型圖,導入PPT裏面。
ppt頁面的面積太小,不支持表達多個頁面之間的跳轉關系;頁面的縮放,難以操作;
PPT裏面的畫圖控件太少,畫圖工具隱藏的比較深,操作起來,不方便;
可以在任何電腦上,用瀏覽器打開,直接閱讀Html原型圖;
不能在手機微信聊天窗口上,直接閱讀Html壓縮包的原型圖;
可以先用Axure設計原型圖,然後導出Html網頁格式。
不支持網頁的再次編輯,不支持在瀏覽器左側顯示網頁的目錄;
郵件接收Html原型圖的壓縮包,需要解壓,然後還需要在眾多網頁文件中,壹個個點開查看;
頁面之間的跳轉關系,難以表達清楚。
可以在任何電腦上,閱讀和編輯jpg圖片格式的原型圖;
郵件發送圖片格式的原型圖,文件可以很小;
可以在手機微信聊天窗口上,直接閱讀jpg格式的原型圖;
可以先用其它軟件設計原型圖,然後導出jpg圖片格式。
在電腦上,圖片格式,比較難操作:比如:調整到100%大小,並左右移動查看頁面跳轉關系;
在手機上,微信發送的時候,具有流程關系的壹大張圖片格式的原型圖,會壓縮,導致微信接收後不清晰。
可以通過其它軟件,將畫好的原型圖,導出為PDF格式;
可以在Windows或Mac上閱讀;支持軟件:AdobeReader,福昕pdf,Acrobat;
可以在智能手機上,閱讀pdf格式的原型圖;支持手機APP軟件:WPS,Acrobat,甚至微信app的聊天窗口,直接發送,對方直接打開。
在電腦上,頁面容易調整到100%大小,並且左右移動查看頁面的跳轉關系;
Mac電腦自帶的預覽pdf軟件,可以合並多個pdf,旋轉pdf的某壹張內頁;
電腦版的福昕pdf軟件,可以給pdf內頁添加標註文本,可以在多頁面的pdf左側添加目錄鏈接。
如果需要重新編輯pdf裏面的某壹頁,那麽就要提取多頁pdf文件中的某壹頁,待修改好之後,再合並到多頁PDF文件裏;
電腦閱讀和手機閱讀pdf,最好是已經安裝了專業的PDF閱讀器。
APP產品設計的原型圖,重在表達意思,只要意思傳達到位了,那麽格式可以不必在意。
原型圖的格式,屬於“道”,“法”,“器”,這3個層次中的“器”。
如果想在用戶體驗上,走的更遠;那麽就需要在“道”,“法”,這2個層次上,積累更多的項目經驗,以及不同崗位的思維方式和溝通思路。
如何打開axure設計的原型圖第壹步當然是下載、安裝、漢化、激活。這些不再詳述,百度壹下有很多。筆者以前也謝了壹個下載的經驗,可以查看。
說壹下基本的布局,8.0比7.0有很多的改變:
圖示標註區1:菜單欄
圖示標註區2:發布區
圖示標註區3:元件演示編輯區(對齊排版、大小、顏色等的編輯)
圖示標註區4:頁面欄目,發布後生成站點地圖(可以取消顯示)
圖示標註區5:元件庫(可以創建屬於自己的元件庫,也可以加載他人的元件庫),元件庫分類越清晰,內容越豐富,我們制作原型也就越快。
圖示標註區6:頁面工作區,發布後內容顯示區
圖示標註區7:為元件或頁面添加交互事件,添加備註說明,設置編輯元件樣式
圖示標註區8:概要,當前頁面的元件組織關系圖,類似於Ps中的圖層面板
圖示標註區9:母版(使用DW做過網站應該會很清楚,母版類似於元件,且具備壹處編輯多出同時修改的特性)。
下面的步驟,我們來簡要說明壹下每個標註區的用法:
2
圖示標註區4:頁面欄目
基本說明:可以將頁面欄目理解為目錄,為了更清晰的組織管理原型,在發布生成時,頁面欄目生成:站點地圖。
在頁面欄目,我們可以創建文件夾及頁面(見圖示中的標註1),且可以拖動任意壹個頁面或文件夾,來改變他的級別(見圖示中的標註2):
END
元件庫的基本操作說明
1
圖示標註區5:元件庫
創建元件庫(圖壹),並命名(圖二)
2
保存成功後axure會自動打開元件庫編輯面板(和原型庫基本壹致):
3
按照“頁面欄目”對庫進行組織,說明:文件夾為元件庫的分類標題
4
添加:按鈕,文件夾。圓角按鈕元件,直角按鈕元件:
並按圖組織:
5
關閉並保存元件庫,回到工作區,按圖示點擊:刷新元件庫(創建時默認已經加載)。成功後,見下圖所示:1為元件庫名。2為命名的文件夾名,3位元件庫名
6
以上完成了元件庫的創建與編輯。
下面來看壹下加載:
本地加載和下載元件庫
點擊“載入元件庫”,會自動打開本地,找到存放元件庫的地方既可。
點擊“下載元件庫”:會自動連接到Axure官網,並手動下載
END
檢視
該欄目包含:元件屬性、元件備註、元件樣式編輯
元件屬性:
我們從創建的元件庫中拖壹個按鈕到工作區,會見到下圖所示的屬性:
標註1:元件名(建議必須寫,原因:同壹元件使用較多時按鈕名稱區別)
標註2:交互事件,常用且非常重要,每類元件對應的交互事件略有不同,即元件的屬性不壹樣
標註3:交互樣式(鼠標滑過、點擊、點擊後)
說明欄,是對於元件的備註,可以添加備註,讓UI或程序更好的理解妳的意圖:
3
樣式欄:對當前元件的背景、邊框、顏色、大小等進行設置:
如何進行web頁面原型圖設計最後半天心不在焉拖拖拽拽把各個部分都搭建好了,可是做出來的頁面慘不忍睹,自己都沒勇氣打開。晚上回家後和鄰居又討論了三個小時,最後熬夜把原型圖完成。雖然最後原型圖也沒有被采納,但是這次原型圖居然受到了表揚,領導說我的原型圖有了提升。今天就寫下這篇文章,為這段時間的工作做壹個總結。原型設計前:①0202重點突出內容:要清楚明了頁面需要突出的內容是什麽,這個在前期的討論中壹般就已經確定;②0202第壹功能目的:除了內容以外,功能方面需要突出的是什麽?如引導註冊或像下壹級頁面引導流量。③0202如果是改版要考慮改版要解決的問題是什麽?對於前壹版頁面存在什麽問題畫原型圖要考慮:④0202內容板塊如何劃分,頁面的內容主要分成幾個模塊,每個模塊內存放的都應該是壹些相近的內容;⑤0202模塊與模塊之間的關聯性:每個模塊與其相近的模塊之間應該有壹些邏輯上的關聯性,而不能隨意的進行拼接;⑥0202頁面的流程:模塊與模塊的上下承接關系,模塊與模塊應該上下存在某些邏輯上的連接性。頁面完成後:完成原型圖後壹定要進行檢查,主要從以下三個方面進行檢查:⑦0202內容是否完整:對比框架中的每壹部分內容檢查是否完整;⑧0202第壹屏是否把最重要的內容展現出來:頁面第壹屏以外的內容基本都是輔助內容,如果不能在第壹屏就把內容全部展現,基本上就等於內容不完整;⑨0202功能是否實現:想要表達的功能是否在明顯的地方表現出來;⑩0202流程是否順暢:把相應的流程走壹遍,看是否流暢。註意tips:①0202未完成的作品拿出來討論頁面不完整不代表思想不完整,即使是不完整的頁面,裏面應該也要有壹個清晰的邏輯圖。通過這種方法可以強迫自己想明白再下手。②0202理清自己的思路要有屬於自己的清晰思路,對內容、功能和流程自己要先想明白,可以列舉壹些具體的問題來輔助理清自己的思路。③0202堅持自己的想法每壹個人都有自己的想法,只要妳理清自己的思路,就壹定要堅持下去。用自己的邏輯解答別人的疑惑和質疑,形成自己的思路。關於工具和作圖:之前花了很多時間去研究axure,是學會了壹些作圖的技巧,可是漸漸發現這些對頁面的提高基本不大,我是覺得在掌握基本的工具使用時可以暫時忽略工具。頁面最重要的是妳的想法,等到想法成熟之後不妨慢慢的考慮工具的深入,太多的考慮技巧方面的問題反而會模糊視線。思考的過程和畫圖的時間可以在7:3都無所謂,前期的框架和流程思路想好後,後面的原型圖也就水到渠成了。