正文

網(wǎng)站原型圖設(shè)計（網(wǎng)站原型圖設(shè)計作品）

發(fā)布時間：2023-07-01 00:45:28 稿源：創(chuàng)意嶺閱讀： 714

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于網(wǎng)站原型圖設(shè)計的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

本文目錄:

1、常用快速原型設(shè)計工具大比拼，原型設(shè)計工具哪個好用
2、使用 Axure繪制原型
3、軟件原型設(shè)計工具有哪些
4、網(wǎng)頁設(shè)計的基本內(nèi)容有哪些?

一、常用快速原型設(shè)計工具大比拼，原型設(shè)計工具哪個好用

經(jīng)過數(shù)年設(shè)計原型的經(jīng)歷，我嘗試過很多原型設(shè)計工具，希望能夠找到最有效率的原型設(shè)計工具。接下來，我來分享一些我用過的原型設(shè)計工具以及他們的優(yōu)缺點(diǎn)！

Axure：發(fā)展較早的一款原型設(shè)計軟件，因而名聲較大。無限畫布，適合做低保真到中保真度的原型。功能很多，也讓學(xué)習(xí)起來有點(diǎn)難度，網(wǎng)上有很多axure教程就不多說了。本地型軟件，可以下載html文檔預(yù)覽，手機(jī)預(yù)覽不方便。

墨刀：國產(chǎn)的一款原型設(shè)計協(xié)作工具，比起axure來非常容易學(xué)會，內(nèi)置組件很多，創(chuàng)建頁面跳轉(zhuǎn)也比axure簡單太多。因?yàn)槭且豢钤诰€工具，可以云端保存工作，這點(diǎn)確實(shí)很便捷。另外，通過分享鏈接就可以分享原型給別人看了，如果涉及到跟同事對接什么的，選擇在線的工具更方便。支持sketch文稿導(dǎo)入和自動標(biāo)注。個人認(rèn)為性價比最高。

Invision: 可以說目前是國外發(fā)展最大的在線原型設(shè)計工具，主打“交互原型”和“協(xié)作”，支持sketch和ps設(shè)計稿導(dǎo)入做交互。近來出的 Invision studio 對標(biāo)sketch，想滿足更驚喜的設(shè)計需要。國外一些大牛公司像airbnb和amazon都在用。不過對于國內(nèi)用戶來說會有服務(wù)器速度的問題，而且，貴。（土豪公司無視）

Marvel: Marvel 也是海外知名度較高的一款原型設(shè)計協(xié)作工具，支持PS和sketch設(shè)計稿導(dǎo)入做交互原型，本身也支持中度保真程度的設(shè)計。也有自動標(biāo)注功能。圖片庫對接unsplash，這樣來自unsplash的很多精美的免費(fèi)圖片可以直接用。價格比Invision稍便宜。

Proto.io：也是國外的一款手機(jī)原型開發(fā)平臺。支持在大多數(shù)的瀏覽器運(yùn)行，共享和協(xié)作操作方便，可以直接在真實(shí)的移動設(shè)備上對原型進(jìn)行測試。擁有較為豐富的UI組件，支持自定義。另外它有不錯的用戶測試功能，支持視頻錄制。并且在移動組件時，能夠?qū)崟r在畫布看到組件之間的距離。另外由于服務(wù)器的原因，有國內(nèi)用戶反應(yīng)速度有點(diǎn)慢；收費(fèi)較高，性價比一般吧。

UXPin：UXPin是DeSmart團(tuán)隊開發(fā)的一個在線可點(diǎn)擊原型設(shè)計工具該軟件，擁有大量用戶界面元素（包括web，iOS，Android等），可以共享預(yù)覽，注解和實(shí)時的協(xié)同編輯。另外該軟件還提供了版本控制和迭代功能。缺點(diǎn)仍然在于國外服務(wù)器和價格問題。

原型設(shè)計工具各有各自的優(yōu)缺點(diǎn)，找到適合自己設(shè)計的原型設(shè)計工具很重要！希望大家早日上手適合自己的原型設(shè)計工具。

二、使用 Axure繪制原型

Axure是最常用的原型制作工作之一。無須任何HTML/CSS/JavaScript基礎(chǔ)，你都可以使用Axure制作出具備良好交互效果的原型圖。本系列筆記以金烏的《Axure RP7 網(wǎng)站和APP原型制作從入門到精通》一書為參考教材，系統(tǒng)地學(xué)習(xí)一下Axure這款原型工具軟件及其背后的設(shè)計思想。

開篇之前先提幾個基礎(chǔ)問題：

（1）什么是用戶體驗(yàn)設(shè)計？什么是交互設(shè)計？什么是視覺設(shè)計？它們之間有著怎樣的關(guān)系？

（2）什么是 UE ？什么是 UX ？User Experience？Usability？衡量“用戶體驗(yàn)”有哪些指標(biāo)和要素？怎么理解“可用性”？

（3）線框圖、原型、視覺稿這三者有哪些區(qū)別？使用場景是怎樣的？

線框圖： 低保真圖，通常以“黑白灰”線條來表達(dá)，制作速度快。

原型圖： 中高保真圖，可以代表最終的產(chǎn)品，用于在利益相關(guān)者之間的溝通。

視覺稿： 高保真圖，具備良好的視覺效果。

在大多數(shù)的公司中，企業(yè)對產(chǎn)品經(jīng)理和用戶體驗(yàn)設(shè)計師并沒有明確的界限，甚至你可以把二者看成相同性質(zhì)的角色。

產(chǎn)品經(jīng)理“斡旋”于開發(fā)工程師、系統(tǒng)功能、視覺設(shè)計、用戶、業(yè)務(wù)邏輯、項目經(jīng)理、投資人之間，協(xié)調(diào)資源并推動產(chǎn)品的發(fā)展。作為產(chǎn)品經(jīng)理，必須深刻理解利益相關(guān)者的視角（他們到底想要什么）并與其密切溝通，以營造無障礙的協(xié)作環(huán)境，讓產(chǎn)品在可控范圍內(nèi)推進(jìn)發(fā)展。

身為產(chǎn)品經(jīng)理，我們必須綜合表達(dá)許多不同的信息，而這些信息常常會相互矛盾或沖突。我們不僅要熟悉業(yè)務(wù)流程，要了解技術(shù)約束、資源約束等，要了解用戶體驗(yàn)對軟件程序性能的影響，還要反復(fù)地做用戶研究和數(shù)據(jù)分析等。我們要在紛亂的多條件模式下找到至關(guān)重要的平衡，并創(chuàng)建出最佳的可行的用戶體驗(yàn)。

事實(shí)上，任何工具都不過是一種為了實(shí)現(xiàn)產(chǎn)品目標(biāo)的手段而已，Axure同樣只是一款工具，在工作中最重要的元素恰恰不是這些工具，而是你本人和你的思想。

1、Axure工作臺上常用功能區(qū)域劃分

菜單欄、工具欄、站點(diǎn)地圖、部件面板、母版面板、部件交互和注釋面板、部件屬性和樣式面板、部件管理面板、頁面屬性面板（包含頁面注釋、頁面交互和頁面樣式3個選項卡）。 視圖 > 重置視圖 ，可以重置Axure工作臺。

（1） 站點(diǎn)地圖 ：用于增加、刪除和組織原型中的頁面。

（2） 部件面板 ：用于管理Axure內(nèi)建的部件庫、第三方部件庫、自定義的部件庫。

2、Axure有哪些內(nèi)置的常用部件？

線框圖就是由一系列的部件組合而成，這和前端頁面是一樣的，頁面由一系列的UI組件組合而成。不同的部件有著不同的功能屬性，繪制原型的過程中要恰當(dāng)選用這些部件。

3、對Axure部件可以執(zhí)行哪些操作？

4、頁面樣式 Page Style 有哪些常用的操作？

5、Axure中的交互基礎(chǔ)

在Axure中創(chuàng)建交互 Interactions需要包含以下3個構(gòu)造模塊，分別是：事件 Events、用例 Cases、動作 Actions。交互是由事件觸發(fā)的，事件是用來執(zhí)行動作的；交互設(shè)計的目的把靜態(tài)的元素變成動態(tài)的，以提升產(chǎn)品的用戶體驗(yàn)。

交互是Axure中的構(gòu)建模塊，用來把靜態(tài)的線框圖轉(zhuǎn)換為可交互的HTML原型。每一個交互都是由3個最基本的單元構(gòu)成，即 什么時候When（事件） 、 在哪里Where（用例） 、 做什么What（動作） 。

（1） 事件Events（When） ：交互在什么時候發(fā)生？交互由事件Events來驅(qū)動。在Axure中的事件可以分為兩大類，其一是頁面事件，其二是部件事件。一個事件中可以包括多個用例，多用例根據(jù)條件判斷來決定執(zhí)行哪一條用例路徑。

（2） 用例Cases（Where） ：用例是用戶與應(yīng)用程序或網(wǎng)站之間交互流程的抽象表達(dá)，每個用例中可以封裝一個獨(dú)立的路徑。通常情況下，我們讓原型按主路徑來執(zhí)行動作，但是為了響應(yīng)用戶的不同操作或其它條件，我們還需要制作可選路徑來執(zhí)行其它動作。Axure中的用例，正是用來給事件Event創(chuàng)建不同的執(zhí)行路徑。一個事件中可以包含一個或多個用例（多用例時需要根據(jù)條件邏輯來判斷執(zhí)行），一個用例又包含一個或多個動作。事實(shí)上，你可以把用例看成動作Actions的容器。

（3） 動作Actions（What） ：動作是由用例定義的對事件的響應(yīng)。Axure中的動作分為六大類，分別是鏈接、元部伯、變量、中繼器和雜項。

三、軟件原型設(shè)計工具有哪些

軟件設(shè)計原型工具有很多種，推薦使用Pixso協(xié)同設(shè)計。Pixso不僅實(shí)現(xiàn)了和Sketch、AdobeXD的無縫銜接，更基于優(yōu)秀的組件變體、自動布局、實(shí)時協(xié)作等特色功能，團(tuán)隊成員面對一個復(fù)雜的設(shè)計項目，不再需要等主視覺完成后再進(jìn)行子頁面設(shè)計，讓UI設(shè)計師在網(wǎng)頁上就可以盡情自由創(chuàng)作。

Pixso自帶組件變體、自動布局等專業(yè)設(shè)計工具，支持UI/UX設(shè)計和原型播放，一體化完成高保真產(chǎn)品設(shè)計，直接拖拽使用自帶的設(shè)計資源庫，還可以將項目中常用的圖標(biāo)、自制組件一鍵保存，省去大量重復(fù)勞動，形成統(tǒng)一視覺規(guī)范。利用Pixso設(shè)計資源，快速開啟原型制作，模擬最終產(chǎn)品形態(tài)和交互效果，實(shí)現(xiàn)了模擬畫筆的特色，提供精細(xì)化矢量設(shè)計，自由切割線段，連點(diǎn)成面?；谠贫藚f(xié)同編輯，Pixso將產(chǎn)品經(jīng)理、設(shè)計師、開發(fā)的日常工作連接起來，實(shí)現(xiàn)協(xié)作更高效，設(shè)計更流暢。

想要了解更多關(guān)于軟件設(shè)計原型的相關(guān)信息推薦選擇Pixso協(xié)同設(shè)計。Pixso通過內(nèi)網(wǎng)本地服務(wù)器部署，確保團(tuán)隊敏感數(shù)據(jù)和核心業(yè)務(wù)數(shù)據(jù)私有化，直接在原型基礎(chǔ)上，快速邀請團(tuán)隊成員開啟設(shè)計協(xié)作，自動生成切圖標(biāo)注，打開瀏覽器就能獲取CSS、iOS、Android代碼片段，還能根據(jù)團(tuán)隊配置，進(jìn)行定制化功能開發(fā)，自定義管理權(quán)限，規(guī)避數(shù)據(jù)泄露風(fēng)險。

四、網(wǎng)頁設(shè)計的基本內(nèi)容有哪些?

網(wǎng)頁設(shè)計的基本內(nèi)容包括以下幾點(diǎn)：

1、原型圖，原型圖階段中【設(shè)計師】需要和產(chǎn)品經(jīng)理溝通需求。

2、視覺稿，網(wǎng)頁設(shè)計的內(nèi)容中視覺稿階段就是要根據(jù)原型圖確定的內(nèi)容和大體板式完成網(wǎng)站的界面設(shè)計，在網(wǎng)站設(shè)計的時候，需要一些圖像和靈感的素材。

3、設(shè)計規(guī)范，當(dāng)視覺稿通過之后，去做設(shè)計規(guī)范。具體來說一個產(chǎn)品的設(shè)計規(guī)范應(yīng)該有：字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等不同的分類。

4、切圖，在網(wǎng)頁設(shè)計的內(nèi)容中，網(wǎng)頁設(shè)計師通常不需要為前端工程師切圖。

5、前端代碼，前端工程師會用代碼重構(gòu)設(shè)計的頁面，把圖紙變?yōu)殪o態(tài)頁面。

6、項目走查，網(wǎng)頁設(shè)計完成后還需要設(shè)計師進(jìn)行項目走查，來確定網(wǎng)頁還原度是否有問題。感興趣的話點(diǎn)擊此處，免費(fèi)學(xué)習(xí)一下

想了解更多有關(guān)網(wǎng)頁設(shè)計的相關(guān)信息，推薦咨詢【達(dá)內(nèi)教育】。該機(jī)構(gòu)已從事19年IT技術(shù)培訓(xùn)，并且獨(dú)創(chuàng)TTS8.0教學(xué)系統(tǒng)，1v1督學(xué)，跟蹤式學(xué)習(xí)，有疑問隨時溝通。該機(jī)構(gòu)26大課程體系緊跟企業(yè)需求，企業(yè)級項目，課程穿插大廠真實(shí)項目講解，對標(biāo)企業(yè)人才標(biāo)準(zhǔn)，制定專業(yè)學(xué)習(xí)計劃，囊括主流熱點(diǎn)技術(shù)，助力學(xué)員更好的學(xué)習(xí)。達(dá)內(nèi)IT培訓(xùn)機(jī)構(gòu),試聽名額限時搶購。

以上就是關(guān)于網(wǎng)站原型圖設(shè)計相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。