1. 如何設計出色的網站後台原型
1、畫原型之前,先理清後台管理的功能模塊,通過樹狀結構圖來幫助自己劃分頁面和模塊。
2、理清模塊之後,就可以著手設計後台管理系統的骨架,老漁哥認為可以分為三種:主模塊(主要分為哪些獨立的功能模塊),次級分類(每個功能模塊又有哪些次級的功能分類),功能事件(具體到每個功能頁面內存在哪些主要的操作)
3、思維導圖幫助理清思路很有幫助。
4、思考的路線應該是自上而下,在進行模塊劃分時不要拘泥於具體的某個界面的展現形式。
2. ui原型圖用什麼軟體做
一、快速原型
快速原型的重點在於快速輸出線框原型,交互功能匱乏,也可以說是低保真的原型。其中常用到的工具有:
1、Pencil。它是一款開源的手繪風格原型圖繪制工具,部件比較豐富。除了使用超鏈接沒有其他交互,只能用於快速畫出界面。可以導出為PNG、pdf、web格式。
2、lumzy。無需注冊、無需下載,直接在瀏覽器上打開即可進行原型設計的工具(英文網站)。主要是用於設計草圖。功能較簡單,交互少,部件不多。雖然lumzy相對簡單,但是上手快,適用於快速原型,也有很多UI設計師在使用。它可以導出為pdf、jpg文檔。
3、MockupCreater。能做界面原型無法做交互,即輸出僅為概念草圖。目前只支持PNG、RTF和PDF三種靜態文件格式導出。
4、MockupBuilde。它同樣也是草圖原型,部件相對lumzy、MockupCreater要多一些,只能使用超鏈接實現交互效果。目前只能導出PNG、PDF格式
二、交互原型
交互原型相對快速原型而言,除了能做出線框原型,還能實現豐富的交互功能,在項目排期時間充裕的情況下,建議採用交互的原型設計。此外這些交互原型也可以舒服功能高保真的原型。其中代表工具有:
1、騰訊UIDesigner。它擁有強大的模板和預制功能,能夠快速的搭建起軟體界面的高保真原型。可以實現設計師、產品經理、程序開發工程師三者間的快速溝通,減少不必要的工作內耗。2.0版本功能交互全面,響應速度也較快,但是針對PC平台應用設計的。UIDesigner預覽很方便,可以導出exe文件。
2、Flash。從曾經最流行的Flash MX、Flash 8.0一直到現在的CSN,迭代了各種版本,像PS一樣歷史悠久。它功能強大,熟練情況下幾乎能做出想要的各種效果甚至UI,甚至可以直接做開發,但是對技術要求高,做出好的效果需要懂點AS腳本。導出方便,除了本身的swf格式,exe、圖片格式乃至web形式都可以導出。
3、Axure。是一個專業的快速原型設計工具,讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟體或Web網站的線框圖、流程圖、原型和規格說明文檔。作為專業的原型設計工具,它能快速、高效的創建原型,同時支持多人協作設計和版本控制管理。
三、高保真原型
單純的高保真原型更加註重視覺效果,但是交互功能先對匱乏是UI設計師必須掌握的基本視覺設計原型軟體。主要使用的工具是PS和illustrator。現有的版本甚至可以直接切圖並保存為web格式。使用熟練的話,可以代替視覺設計師、重構工程師的很大一部分工作。
3. 網站製作流程是什麼
一、確定網站主題
網站主題就是你建立的網站所要包含的主要內容,一個網站必須要有一個明確的主題。必須要找准一個自己最感興趣內容,做深、做透,辦出自己的特色,這樣才能給用戶留下深刻的印象。
網站的主題無定則,只要是你感興趣的,任何內容都可以,但主題要鮮明,在你的主題范圍內內容做到大而全、精而深。
二、搜集材料
明確了網站的主題以後,你就要圍繞主題開始搜集材料了。要想讓自己的網站有血有肉,能夠吸引住用戶,你就要盡量搜集材料,搜集材料越多,以後製作網站就越容易。
三、規劃網站
一個網站設計得成功與否,很大程度上決定於設計者的規劃水平,規劃網站就像設計師設計大樓一樣,圖紙設計好了,才能建成一座漂亮的樓房。
網站規劃包含的內容很多,如網站的結構、欄目的設置、網站的風格、顏色搭配、版面布局、文字圖片的運用等,你只有在製作網頁之前把這些方面都考慮到了,才能在製作時駕輕就熟,胸有成竹。也只有如此製作出來的網頁才能有個性、有特色,具有吸引力。
四、網站建設
網站做的好不好,就要看前端製作人員和程序員的能力了,有許多的公司用的都是剛剛畢業的學生,做的一般都會有些許的問題,這里就要好好的選擇一個公司了。
五、上傳測試
網站製作完畢,最後要發布到Web伺服器上,才能夠讓全世界的朋友觀看,你可以很方便地把網站發布到自己申請的主頁存放伺服器上。
六、推廣宣傳
網頁做好之後,還要不斷地進行宣傳,這樣才能讓更多的朋友認識它,提高網站的訪問率和知名度。推廣的方法有很多,例如到搜索引擎上注冊、與別的網站交換鏈接、加入廣告鏈等。
七、維護更新
網站要注意經常維護更新內容,保持內容的新鮮,不要一做好就放在那兒不變了,只有不斷地給它補充新的內容,才能夠吸引住瀏覽者。
4. 關於網頁和移動端原型設計的方式
你說的是高保真原型,可以先用PS等設計工具做好界面設計,再上傳到摹客轉為高保真原型,也可以直接用摹客在線的原型設計工具畫高保真交互原型,UE和開發也可以直接在摹客查看圖層信息和下載切圖,傳達意見更准確。
5. 如何用Mockplus來畫簡易網頁版原型圖
打開Mockplus這個軟體,點擊新建項目,選擇你需要用的頁面模式,如:手機、平板、網頁等,選擇好就可以進行原型圖的繪制了。
2
首先,在畫之前引入眼簾的是Mockplus的工具欄,有組件、交互、擴展、布局、移動、靜態、批註等功能;點開看看,熟悉各種功能的使用;
3
現在,熟悉完畢後,我們可以進行簡單網頁版原型圖繪制。
END
方法/步驟2
一、利用組件里的線框工具進行拖拽,可隨意拖拽形成大概布局,然後可以在線框中進行編輯,選擇需要的字體顏色大小,線框粗細等,如下圖所示;
二,利用組件里的擴展功能,繪制你所需要的搜索框,表單等功能;利用圖片功能可以導入你所需要的圖片使布局圖變得更有直觀性;如下圖所示;導入完後,還可以隨意縮放圖片大小。
三、利用布局裡的工具,添加選項卡、分組框等需要的功能,也可以進行編輯;
四、對需要的功能組件進行拖拽,編輯,一個簡單的網頁版原型圖就畫好了!
6. 網頁設計流程,用畫原型圖嗎邏輯誰來設計
首先要有網頁或者說是網站的需求方提供需求內容。
例如頁面要包括哪些,如用戶登錄,注冊,信息展示,甚至在線支付之類的東西。
然後還要有一些具體功能需求,如用戶注冊需要提供哪些資料,如身份證,地址之類的信息。
信息展示具體是哪些。
有需求方先要寫明自己的需求,然後根據需求進行下一步的設計,原型圖肯定要畫,因為沒有圖就無法製作網頁。
先把圖畫好,然後和對方商定細節,例如logo的大小,段落間距,字體顏色,之類的細節東西。
畫好圖並確定後就可以按照圖來製作網頁。
至於內部後台相關也要商定。
具體由誰來做什麼要視情況而定。
例如如果對方公司有美工之類的,可能就直接給你一些素材甚至畫好的圖讓你直接製作。
也有可能需要你自己畫圖或者找人畫圖。
7. 求一款中文,簡單的畫網頁原型圖軟體。
你可以試試Mockplus,這是我們團隊之前用的,基礎功能免費,幾乎沒有學習門檻,如果想要練手,我比較推薦這個工具。Mockplus的功能也比較多,有許多預設組件和圖標,支持多人協作,演示也很方便,分享鏈接或二維碼,在電腦端、手機端都能查看,如果擔心不安全,也可以重置鏈接。
另外Mockplus的母公司摹客新推出的在線原型,這個是我們現在繪制高保真原型的工具,支持矢量繪圖和布爾運算等,之前用sketch畫圖,現在摹客原型就能搞定,交互也很豐富,還支持流程圖和產品文檔,畫完直接在摹客平台交付,節省了許多麻煩的步驟。
8. 怎麼學Axure網站原型設計的問題
學習axure rp可以分為以下幾個階段:
一、新手級:
是指剛剛接觸原型設計,這個時期主要是打基礎。先熟悉AxureRP的工作台,有哪些功能及組件,以及一些基本的操作,弄清楚每個組件是干什麼用的。
在新手階段,主要還是以熟悉為主,可以去網上找點前人總結的經驗。再者就是要自己嘗試著去用一遍裡面的功能,可以做一些簡單的頁面原型,可以是沒有任何交互的,也可以是帶點交互的。
二、學徒級:
等到熟悉了AxureRP的所有功能之後,要開始實際應用其去設計一般的中低保真的原型了。光知道組件怎麼用了還不夠,還要配合交互事件,交互動作,條件判斷,甚至是變數一起去實現某個交互的功能。如果說新手階段是打基礎的階段,那麼這個階段其實就是一個融會貫通的過程,把所掌握的知識活學活用,真正的結合起來去實現一個整體的原型設計要求,這樣才能掌握AxureRP的核心功能。
這個階段的學習前期主要是模仿為主,首先要能看懂別人做的原型實例,看看人家是怎麼設計的,然後依樣畫葫蘆,自己動手做一個。
三、大師級
AxureRP自身所帶的交互事件和動作已經能實現現有產品層面上的大部分交互效果,只要做基本上都可以用原型來實現。這個階段可以試著做一些實現起來比較困難的實例,並可以嘗試著開始做一些整站或者整體產品的效果,前面都大多停留在單個頁面,單個實例的原型設計上,這里就要求能完成更整體的效果,出來的是一個產品的完整的原型。
最後要說明一下的就是,AxureRP只是一種原型設計工具而已,做交互設計最重要的還是想法,工具只是用來幫實現想法的。不必過於追求技術,不必過於追求視覺表現。把握好整個產品方向的同時,應專注於交互流程、頁面內交互、布局結構的創新和優化。按照上面堅持下去,學習axure不在難!
9. 交互設計中原型圖和線框圖
直白點呢,線框圖更多是在設計初級,直接快速勾畫的網頁或軟體產品的主體結構、用戶流程或者頁面跳轉關系等, 方便設計師或團隊能夠快速決定產品的宏觀設計方向,從而盡快開始細節設計。
而原型圖,相對線框圖,呈現了更多的細節或交互。我們所看到的的往往是一頁頁呈現的網頁或app設計。根據細節的呈現程度以及提供資源的質量,分為低、中、高三種。最值得提及的就是高保真原型,不僅提供豐富的頁面細節,還添加大量動畫和交互,與產品的真實狀態非常接近,能夠直接交互並測試。
總之,不管哪種類型,都是為了方便設計團隊溝通,加快設計流程的重要資料,是設計們經常使用的設計資源。當然,對他們比較陌生的設計師,也可嘗試使用摹客設計工具,快速繪制線框圖或原型圖,切實的查看他們之間的區別。