當前位置:編程學習大全網 - 人物素材 - 在線頁面原型設計怎麽做-如何進行web頁面原型圖設計

在線頁面原型設計怎麽做-如何進行web頁面原型圖設計

關於網頁和移動端原型設計的方式

妳說的是高保真原型,可以先用PS等設計工具做好界面設計,再上傳到摹客轉為高保真原型,也可以直接用摹客在線的原型設計工具畫高保真交互原型,UE和開發也可以直接在摹客查看圖層信息和下載切圖,傳達意見更準確。

如何進行web頁面原型圖設計

最後半天心不在焉拖拖拽拽把各個部分都搭建好了,可是做出來的頁面慘不忍睹,自己都沒勇氣打開。晚上回家後和鄰居又討論了三個小時,最後熬夜把原型圖完成。雖然最後原型圖也沒有被采納,但是這次原型圖居然受到了表揚,領導說我的原型圖有了提升。今天就寫下這篇文章,為這段時間的工作做壹個總結。原型設計前:①0202重點突出內容:要清楚明了頁面需要突出的內容是什麽,這個在前期的討論中壹般就已經確定;②0202第壹功能目的:除了內容以外,功能方面需要突出的是什麽?如引導註冊或像下壹級頁面引導流量。③0202如果是改版要考慮改版要解決的問題是什麽?對於前壹版頁面存在什麽問題畫原型圖要考慮:④0202內容板塊如何劃分,頁面的內容主要分成幾個模塊,每個模塊內存放的都應該是壹些相近的內容;⑤0202模塊與模塊之間的關聯性:每個模塊與其相近的模塊之間應該有壹些邏輯上的關聯性,而不能隨意的進行拼接;⑥0202頁面的流程:模塊與模塊的上下承接關系,模塊與模塊應該上下存在某些邏輯上的連接性。頁面完成後:完成原型圖後壹定要進行檢查,主要從以下三個方面進行檢查:⑦0202內容是否完整:對比框架中的每壹部分內容檢查是否完整;⑧0202第壹屏是否把最重要的內容展現出來:頁面第壹屏以外的內容基本都是輔助內容,如果不能在第壹屏就把內容全部展現,基本上就等於內容不完整;⑨0202功能是否實現:想要表達的功能是否在明顯的地方表現出來;⑩0202流程是否順暢:把相應的流程走壹遍,看是否流暢。註意tips:①0202未完成的作品拿出來討論頁面不完整不代表思想不完整,即使是不完整的頁面,裏面應該也要有壹個清晰的邏輯圖。通過這種方法可以強迫自己想明白再下手。②0202理清自己的思路要有屬於自己的清晰思路,對內容、功能和流程自己要先想明白,可以列舉壹些具體的問題來輔助理清自己的思路。③0202堅持自己的想法每壹個人都有自己的想法,只要妳理清自己的思路,就壹定要堅持下去。用自己的邏輯解答別人的疑惑和質疑,形成自己的思路。關於工具和作圖:之前花了很多時間去研究axure,是學會了壹些作圖的技巧,可是漸漸發現這些對頁面的提高基本不大,我是覺得在掌握基本的工具使用時可以暫時忽略工具。頁面最重要的是妳的想法,等到想法成熟之後不妨慢慢的考慮工具的深入,太多的考慮技巧方面的問題反而會模糊視線。思考的過程和畫圖的時間可以在7:3都無所謂,前期的框架和流程思路想好後,後面的原型圖也就水到渠成了。

如何設計出色的網站後臺原型

明確目標

既然是做原型的角度,我們就從具體工作來談,首先要明確的肯定是產品目標,比如以下幾個問題:

是全新的產品,還是更新改版?

有沒有相匹配的前臺系統?或者其他需要配合的線下資源?等等

業務層面的目標是什麽?新增功能?體驗優化?等等

需求分析

明確了產品目標,在做需求分析的時候就會有所側重,總的來說,值得關註的有以下幾個要素:

1、角色權限

這個非常重要,壹定要在具體設計之前熟悉管理後臺的所有類型用戶。包括壹***有幾類用戶,他們各自的使用需求,操作權限,還有用戶權限的設計。

2、信息架構

壹定要畫信息結構圖(即產品層面的數據模型),主要用於理清產品結構。畫壹下腦圖,列壹個excel表單,詳細程度依據自己習慣即可,需要和用戶配合起來設計。

這個是和普通原型設計比較不同的壹點,如果是改版還需要特別標註和舊版的區別,以及舊數據的清理或遷移方案。另外,還需要考慮和其他資源(前臺、對應頁等)的配合,數據流向以及狀態轉移等。

4、功能流程

常規需要考慮的用戶流程和業務規則流程。根據不同的業務目標,用戶流程可以按場景或功能進行劃分,給予部分用戶適當的優化。業務規則流程需要保證邏輯清晰,閉環,不要遺漏異常流(閉環很重要)。

原型設計

終於可以開始原型設計啦,現在各種管理後臺的主題模板都有很多,沒有特別需求的情況下,和開發溝通好選擇壹套“抄”即可。

設計過程中註意壹下導航,列表(增刪改查排序篩選)等,細節上不要遺漏預覽、錯誤/成功提示、新內容提醒、快捷鍵等

  • 上一篇:識字教學中如何重視詞義
  • 下一篇:合適微信的傷感說說大全:滿心歡欣之後卻是壹場大雨澆的透徹
  • copyright 2024編程學習大全網