產品經理當然要會畫原型啦~
聊聊怎麽畫原型吧!
在畫原型之前,更重要的事情,就是畫頁面流程圖和信息架構圖!假如妳沒有這些東西,就開始畫原型,那麽等著妳的就是沒完沒了的改改改。
頁面流程圖是以用戶視角,看流程合理性。通常適合於跳轉比較復雜的產品功能,如電商、社交產品。
為什麽要畫頁面流程:
(1)是交互設計/原型設計的基本依據,是邏輯基礎。如果妳都沒想好頁面流轉的順序,那麽妳畫的原型壹定不是可以確定下來的版本
(2)代表了用戶的操作過程,先畫頁面流程圖能迅速發現體驗問題。有了頁面流程圖,妳可以設身處地想象用戶在使用產品時的操作流程,發現其中可能出現的問題
(3)突出頁面重點元素與邏輯關系,提升原型的設計效率。很多頁面不是全新頁面,而是在原有頁面做壹些修改,如果妳知道頁面流轉順序,那麽會給妳畫原型減輕很多工作量
頁面流程圖包含:
(1)四方形:業務流程中的四方形部分,異常流程或彈層通常用菱形表示
(2)流向:主幹流向和輔助流向
(3)重點元素:每個流程中,重點要體現和表達的內容是什麽
畫頁面流程圖的工具:
(1)Axure:畫了頁面流程圖可以緊接著畫原型
(2)ppt:方便講解
需要註意的地方:
(1)回歸業務流程,明確主線:頁面流程壹定來自於業務流程,壹般為業務流程中的方形部分。異常流程壹般為彈層或彈窗提示。業務流程畫的好,頁面流程就簡單。
(2)明確頁面中的重點元素:功能在頁面中,有哪些是需要表現元素。增加異常流程的處理邏輯。增加輔助的幫助頁面。考慮下遊觸發點(按鈕/鏈接/滑動...)。
(3)溝通與優化:首先要盡可能窮舉涉及的頁面,然後做減法,有些頁面合並或刪除。通過原型草圖,優化調整頁面關鍵元素。與UI、UE、前端研發多溝通會有更好的效果。
頁面流程圖壹般規則:
頁面流程圖例:
壹個具體案例:
業務流程:
頁面流程:
主要是分離出了普通用戶的操作流程,加異常處理。
對於普通用戶的關鍵頁面和關鍵流向:
頁面流程圖:
(1)分離出5個頁面,確定流程流向
(2)固定元素,例如在“1購物車”中,“提交訂單”就是下遊觸發點,點擊後流向下壹個頁面;在“2輸入優惠碼”中有關鍵元素“填寫優惠碼”,另外還有下遊觸發點“確認訂單”...
(3)針對每個頁面去畫對應的原型圖
信息架構圖,以產品視角,看包含多少功能點。適合於層級分明的,如音樂產品、新聞客戶端、閱讀類產品等。
信息架構圖例1:
有了頁面流程圖或信息架構圖,現在終於可以開始畫原型啦。首先,什麽是產品原型設計?
產品原型,俗稱線框圖,大概就是草圖的意思吧。它是產品落地的關鍵點,是從虛擬概念到用戶接觸的節點。同時也是產品經理產出的關鍵內容,上傳下達,上給老板,下給UI、UE同事。
產品從原型到上線的流程:
大公司的產品經理只需要做手繪和低保真的部分,小公司可能還要兼職交互設計...
案例:
好的原型有什麽特點:
(1)整體:頁面結構清晰、跳轉關系明確、與業務流程壹致、完整表達用戶需求
(2)獨立頁面:功能元素明確有序、位置關系清晰、不同狀態變化清晰
(3)交互設計:清晰的交互邏輯、壹致交互方式、界面統壹
常用工具:
(1)紙筆:自己畫畫,快速學習和定位
(2)白板:多人討論
(3)軟件Axure/Sketch/墨刀:產出正式文檔
案例:
(1)研究流程:業務流程->頁面流程
(2)確定頁面框架:大概確定頁面布局和大的框架
(3)畫原型:畫模塊,確定交互細節
註意事項:
(1)盡可能用真實比例、真實文案,使元素更真實,也避免在需求評審時被之壹。盡可能真實模擬極端情況,並示例清楚。
(2)緊扣需求主體,不橫生枝節。如果原型需要增加新功能,壹定要是來源於需求,並且要考慮後端數據來源。
(3)不要上顏色!原型就用黑白灰,不要給UI、UE挖坑
(4)目錄樹清晰,閱讀流暢
(5)保存修改記錄,關鍵修改重新保存文件
畫/改原型的時間盡量控制在20%工作時間之內,否則就要問問自己是不是哪裏出問題了哦。
產品需求想明白了沒
產品流程理清楚了沒
手繪草圖畫了沒
手繪草圖和Boss確認了沒
網站制作流程步驟詳解網站制作流程步驟詳解
簡單來說,網頁設計的目的就是產生網站。壹個好的網站是做推廣的基礎,下面YJBSY我為大家收集整理了關於網站制作流程步驟,希望對大家有幫助!
第壹步:明確網站的定位
我們要明確自己網站的定位,清楚公司的產品優勢以及訪問的目標群體。這是我們首先要做分析的,只有根據自己公司的實際情況,來制作網站的風格定位。眾所周知,網站風格分營銷型網站、品牌型網站、電商網站、平臺網站等,關於我們的類型我下次可以給大家具體講解。檔妳明確了自己網站的定位後,開始收集相關的網站案例,作為下壹步工作的參考。
第二步:制作網頁原型圖
這是壹個費腦活,目前大多數人都是采用Axure的軟件制作,畫原型圖需要參考很多網站風格,通過不斷的借鑒,才能總結自己的網站風格。目前設計流行的元素是采用圖標配文字,界面扁平化,尺寸做成寬屏風格。在制作原型圖的過程中,我們需要看很多的網站風格,如果妳是要做外貿網站,那麽妳需要尋找很多國外大牌的網站,看壹下他們的`網站風格,才能很好的找到那種思維感覺。國內的網站相對來說還是比較保守壹些,盡管也是扁平化設計,但是從布局上大多數網站是異曲同工。
第三步:上色/UI界面設計
當原型圖做好以後,可以開始交給設計師做UI設計,設計師會根據原型圖的布局進行上色設計,但是不局限於原型圖,優秀的設計師不會按部就班執行,會根據自己的經驗適度做壹些細節布局上的更改,此舉的目的是為了提高界面美觀和用戶體驗度。
第四步:DIV+CSS切圖/排版
當設計工作完成後,要開始做切圖,如果網站只是PC站,切圖只要做壹套樣式,如果是響應式網站開發,切圖就需要做三套樣式,分別為PC端、平板、手機端。響應式網站會根據不同分辨率和屏幕大小自動適應,以達到最好的體驗效果,但是在這裏我需要補充壹句,不是所有的網站都適合做成響應式,因站而異,具體原因下壹步文章在分享。
第五步:程序開發
切圖完成後,就進入程序開發階段,程序開發就是做後臺管理,讓網站後期能有壹個管理後臺來更新前端的資料內容,目前開發網站的開發語言比較流行的有兩種:壹是PHP語言,二是.net語言。
第六步:網站Bug測試和資料填充
程序開發出來後,交給專職客服來測試Bug,邊填充資料邊測試頁面效果,剛開發出來的網站都會存在Bug漏洞,因為是純手工制作的項目,靠鍵盤壹個壹個字母敲出來的代碼,有Bug實屬正常現象,所以就需要客服進行測試,測試出來的問題點整理文檔形式交給程序員進行修復。
初級產品經理-如何高效繪制AXURE原型原型是產品經理或者交互設計師所設計的某壹需求或者某壹問題的具體的解決方案。繪制原型的工具有很多,我們公司大多的產品用的都是Axure。用這個軟件,高保真或者低保真原型都能做的很好。那麽,怎樣的原型才適合團隊交流?
畢竟繪制出來的原型並不是只給自己看的,還要講解給團隊裏的成員,UI/前端/開發。特別是進行小組內評審的時候,通過演示原型,需要向他們講解產品內部的邏輯、具體的頁面、動效等,還要向他們詢問設計是否合理,能否實現等,靜心傾聽他們的意見。這時候,原型就是壹個思維傳達的工具,將妳的想法,翻譯並灌輸給妳的團隊成員。同樣,原型是也團隊的交流工具,針對繪制出來的原型,每個人都可以談談自己的看法,交流思想,完善原型不足的地方。
所以原型繪制出來,必須要有基本的交付標準。
壹、原型設計的基本交付標準
1.清楚------讓他人能明白產品是幹什麽的,包括什麽功能,有哪些頁面。
需要清楚地表達頁面有哪些內容模塊
需要清楚地表達模塊內部的構成元素
2.清晰------讓隊友知道具體有哪些要求,指導他們如何做
1功能操作
某壹個功能可以進行哪些操作,點擊/鼠標懸浮/拖動等操作,以及頁面會有什麽反應。(方便開發的工作)。
2操作路徑
有壹些操作是要跳轉頁面,跳轉的路徑需要標清楚,跳到哪去了,涉及哪些頁面,頁面之間是如何聯系的。防止用戶迷失。
3點擊狀態
壹些鏈接,按鈕,需要標明它初始的時候是什麽樣,鼠標懸浮有什麽效果(顏色/下劃線/提示語等),點擊的樣式變化,以及點擊後的樣式。(這些可以為前端的工作提供方便)
4信息組合
相關的信息需要組合在壹起,比如壹些基本信息,姓名/性別/年齡等最好放壹塊,不要分開。不相關的保持距離。
5位置排序
頁面的布局應該適應用戶的習慣,瀏覽方式、工作任務。突出強調重點,方便用戶的工作。壹些數據可以思考壹下它們的排列方式,按什麽排序,能方便用戶查找,仍舊是“以用戶為中心”。
3.周全-----產品的各種細節,不能疏忽
1交互狀態
某些重要的操作,交互樣式是怎樣的,效果如何,最好單獨抽出來做成高保真,演示給他人看,讓他們對產品有深入的體驗和感受。
2數據顯示
原型上涉及的相關數據做好有真實的案例,將需要獲取的關鍵數據全部展示出來,比如壹篇文章,需要的數據:作者、發布時間、瀏覽量、喜歡數、收藏數等,方便開發準備必要的數據接口。
3異常考慮
需要考慮壹些突發情況的應對,比如斷網、加載太慢、數據已經被刪除了、數據找不到了、沒有訪問權限等等情況。
4配套頁面
產品裏的壹些功能可能和其他產品有關聯,需要將可能涉及的其他頁面包括到項目內。比如頁面在wap上手機的瀏覽樣式、壹些發送給用戶的消息/短信的內容和樣式等等。
4.基本審美
1對齊
2間距
3顏色
4字體
推薦大家看看《寫給大家看的設計書》這類易上手的書籍。
5.基本規範
1頁面尺寸
web的寬度有960px、1000px、1200px,App有安卓、iphone5、iphone6等,需要與已有的產品保持統壹的尺寸。
2字體大小
標題可以是18px或者16px,內容可以是14px。既要考慮用戶是否看到清,又要考慮美觀。
3顏色
原型不要有太多的顏色,堅持黑白灰,除非要突出,可以用其他的顏色。
4彈窗
彈唱的樣式最好做統壹,彈窗名+內容+操作按鈕+關閉
5元件
不在原型正文添加過多的截圖、圖標樣式,會對UI的設計造成幹擾。
二.Axure的快捷使用技巧
工欲善其事必先利其器,工具使用的越嫻熟,才能節省大量時間用於方案的思考。下面將簡要分享Axure繪制原型時的壹些快捷操作:
首先在頂部菜單欄中找到<視圖>,把需要的部件顯示,就可以設置了。
1.組件庫的建立(能提高效率,保證產品層面的統壹壹致)
2.母版的使用(適用於多頁面通用的部分,修改後,集體自動更新)
3.設置頁面樣式(頁面的字體、背景能壹次性設置好)
4.元件的交互樣式
5.元件組合
把要組合的原件用鼠標框在壹起,按住ctrl+G,成為組合後就可方便復制拖動了。許下按住ctrl+shift+G,也可以點擊選中後,點擊下圖的兩個圖標來組合和取消組合。
6.對齊、居中、平均分布
選中要對其的內容,選擇壹種分布樣式,就能快速得到整齊的原型樣式,而不用壹個個手動調整。
7.輸入框類型的設置(預設好類型)
壹些輸入框,可能需要設置默認文字,可以直接選中了輸入框後,在原件屬性裏設置提示文字和壹些限制。
8.元件的提示語
有些文字需要有鼠標懸浮顯示提示語的動作,可以直接在原件的屬性裏設置“原件提示”,輸入要顯示的內容,即可。
三、制作原型的過程
1.梳理功能點-------------------將需求轉化為功能清單,標出重要等級(前提是需求已經梳理清楚)
2.規劃產品結構----------------用Xmind或者筆和紙等工具畫出產品有幾個頁面,每個頁面包含哪些元素
3.整理原型目錄----------------用Axure添加原型的幾個頁面,考慮頁面之間的跳轉關系
4.設計頁面的布局(打格子)-----用不同的色塊,方框來表示這部分將要表示什麽板塊,設計好頁面的布局
5.填充各模塊的細節----------在方框裏把具體的信息和數據填充完整
6.增加少量的交互動作--------------體現在壹些涉及到任務的操作
7.頁面註釋-------------完善交互說明
8.審查自檢------------------功能是否覆蓋完全;頁面有沒有缺失;流程是否明確;狀態是否完備
四、原型應用中的經驗
因為我多是負責後臺系統的優化,所以是直接和開發打交道,如果涉及前臺頁面,就需要UI先將原型做成圖片,再由前端制作含有動效的demo,開發再按照demo開發。但是不論哪種,繪制出來的原型壹定需要讓隊友都明白妳的邏輯和要表達的重點。
第壹次負責項目的時候,我用的是高保真,畫完整的原型就花了壹星期多,各種動作和交互,恨不得做個虛擬的產品。但是和開發講了原型後,等來驗收項目的時候,才發現,開發大部分都沒有按照原型上的動作來,甚至連細節都有遺漏。壹個個催著補上後,我開始思考這種方式是不是不太劃算,太費事費力,結果又不太好。
後來我看了我上級繪制的原型,都是以靜態頁面為主,可以說是低保真,但是每壹種情況都詳細地用圖文描述清楚,點擊之後是什麽樣子,將要獲取什麽數據,失敗了會怎麽樣都有。而且這種方式,完成的特別快。於是我就選取低保真模式的開始畫原型,結果發現,開發有時候並不能將壹些動作做好。
於是我開始“T式原型”。“T式原型”就是大部分是以低保真鋪展開,將整個產品的邏輯都直接呈現出來,再在某些需要重點描述的地方用高保真描述深入。所以,我的原型大部分是以低保真+註釋說明和高保真+動作演示的組合。不過對於交互簡單的產品來說,低保真模型足夠了。
每個產品繪制原型的習慣和風格都有所不同,但關鍵還是需要進行小組會議來向隊友們講解原型和邏輯,在開發的過程中,需要多溝通。
另外,分享大家關於AXURE學習的網站,可以在裏面找到免費的軟件安裝包和教學課程。
/
如果對文章感興趣,歡迎評論留言,堅持喜歡的事情,加油~