網站交互設計規范

1、有哪些關於交互設計方面的好網站

中國設計之窗，這里不單有設計大師設計作品集，還有許多設計行業類的資訊。　
對設計有興趣的兄弟，這個網站必是收集添加首選　

2、什麼是網站Web端互動式設計的常見誤區

交互設計的5個常見錯誤
艷麗的圖片、順暢的滑鼠懸停效果和意外的動畫，不再那麼容易引起用戶注意了。但難題卻沒有解決——如何創造令人愉快的用戶體驗，讓用戶面帶笑容完成轉化？如果你對常見的設計陷阱有所警覺，就能更少犯錯。
為了方便——可能也為了讓你知道你不是獨自一人——以下總結了最常見的交互設計誤區。
1、鋪天蓋地的創新
網頁設計師都非常有創造力。我們希望通過作品來表達自我。我們總是在尋求創新的設計方法來脫穎而出。但是，當涉及到交互設計時，創新並不總是好事。甚至會給你的網站帶來壞的影響。用戶渴望熟悉的事物，他們總是會遵循一些特定的操作方式。
Randy
J. Hunt，Etsy的創意總監和Proct Design for the
Web作者，清晰地陳述過：「嘿，設計師：別再TM自作聰明了。」在文章中，他詳細解釋了為什麼別在網頁設計上過分熱衷創新。
以Iotorama網站為例。它挺漂亮，音樂深情，但是看著滿屏幕移動的球，用戶不知所措。不要誤解我的意思，這個項目非常出色，超級有創造力！我喜歡這個大膽的創意，但它一點也不直觀。

還有一個例子。Safety on the
Slopes項目背後的創作者想到一個巧妙的互動式圖形，用來警告用戶冬季運動的危險。非常創新，同時也很直觀、有趣、令人印象深刻。

2、令人困惑的導航
「不要自作聰明」的准則也可以沿用到導航上。有些設計師試圖使用折衷的名稱來尋求新穎。比如Chijoff
網站就讓用戶不知道他們究竟提供什麼，如何聘請他們。需要看上好一陣子，才能理解「共同創造」頁面實際上就等同於「服務」。甚至還有，通讀整頁後用戶仍然
不知道該怎麼做……頁面末尾只有個小注冊表單用來獲取最新的行業新聞和提示！在「聯系」頁面也沒有表單，只有郵編和郵箱地址。使人們聯絡或聘用他們非常困
難。

你能猜出「Universe」在Maison
Margiela網站中是什麼意思嗎？實際上它鏈接到他們的Facebook主頁。誰能想到？

相反，看看legworkstudio的網站。它的創意與超凡令人震撼。導航非常清晰不含糊。用戶絕對不會迷路。
3.
雜亂無章
有一段時期，網站都試圖把一切可能的東西擺上檯面。那些日子已經一去不復返，但是很多網站仍然在犯這個錯誤。看看這個在線商城：

設計師試圖堅持一種單色配色，但是大量顏色不同的色塊、logo和字體，在這個頁面上就足夠讓用戶步履蹣跚。搜索框有著醒目的文案：「那麼，今天你想要什麼？」，但整個布局的外觀和感覺非常過時。
EBay是主要在在線零售商之一，在這點上做得不錯。沒有用產品圖片、促銷和各種行動召喚塞滿整個頁面，而是保持它干凈簡潔，強調他們確實希望用戶首先關注的東西，並附上清晰的提示，接下來該怎麼做。

4.
注意對比，大哥！
對比是創造視覺層級、吸引用戶注意特定元素的最重要的方式之一。在網頁設計中，對比不僅僅意味著顏色使用，也包括尺寸、形狀和位置。
這個網站是最簡單生動的例子。他們做到了統一一致，但整體背景和按鈕並不夠吸引人，尤其是在訂購按鈕上。

相比來看這個。顏色選用很接近，但結果卻完全不同。而且，創新的滾動效果，流暢地介紹了產品的新功能——反光材料。很酷，對吧？

5.
忽視表單樣式
表單設計是用戶體驗最基本的部分。每個網站都有一個目標——無論是樹立榜樣、直接售賣產品或是提供信息。不幸的是，許多網站有著光鮮的首頁，卻寧可用長表單和復雜的驗證碼來使用戶厭煩致死。除非用戶有強烈的先導動機，否則他們就會離開。
有了JCF這樣的有效的跨瀏覽器的解決方案，是時候忘記那些醜陋的默認表單元素了，轉向一種更加沉浸的用戶體驗吧。

另一件氣人的事，是表單要求太多信息，或者沒通過完善測試。例如sketchybusiness.io的表單高亮顯示了所有的空白框，甚至包括非必填項。

如果你看了sketchybusiness.io的表單，你絕對會喜歡它的滑鼠懸停和按鈕按下狀態。而且，「別害羞」的提示文案增加了一絲親切幽默的感覺。

最後……
不要懶於測試！對你重要的對於顧客未必重要。他們在哪裡遇到問題卡住？是導航、奇特的視覺差滾動效果、還是長時間載入的視頻？用戶測試的最大好處之一，是你可以通過用戶的視角來觀察，關注他們的需求、做出改進。不要抑制你的創造力。要牢記網站訪客可能會感到困惑和沮喪。
你見過最糟的交互設計錯誤是什麼？可以在評論中分享你的想法和故事。

3、網站交互設計需要注意的幾個方面

1、網站設計內容問題

內容是所有網站的靈魂，也是客戶關心的東西，打開網際網路看看企業網站，我們很容易發現，大多數中小企業網站欄目劃分趨於一致：公司簡介、產品介紹、聯系方式等，在版式設計上也基本上是上下分欄、左右分欄等方式，在內容上要從客戶考慮，要了解客戶想從你頁面上了解些什麼，總之要貼近客戶。2、網站設計技術問題

首先應該說明的是，我們並非鼓動企業在自己的網站中加大技術含量。實際上，最重要的是所使用技術在多大程度上實現了預期的功能，或者說所要的功能需要什麼樣的技術實現比較經濟劃算。而我們在與企業接觸中，常常碰到這種情況：網站中使用了先進的技術，當然進行了大筆的投資，但實際上所實現的功能通過其他方式，很低的投入就可以實現！但是企業並不了解這些。3、網站設計交互問題

您的網站是否實現了與客戶的交互，在多大程度上實現了這一功能，值得您仔細考慮，在我們接觸的客戶中，甚至有的客戶抱怨：他的信箱至今還沒有收到mail！經過我們的檢查，是因為留言簿中有關信息提交的設置有問題！使得與客戶之間的交流出現很大的問題，這也是很多企業應該注意的問題。另外在設計上應注意什麼

1，對每一個超級鏈接點擊之後採用新開窗口還是直接跳轉，必須認真對待。如果用戶點擊一個link之後是要放棄當前頁面開始新的體驗，則應用直接跳轉。如果用戶點擊link是要了解更多的信息，但是當前頁面的信心仍然有用，則應新開窗口。

2，在每一個用戶可能需要幫助的地方提供幫助信息或幫助按鈕。完善的幫助系統是一個產品，網站成功很重要的因素。

3，承諾問題，不要輕易對你的用戶承諾什麼，但是一旦承諾了，就要盡最大努力去兌現。在首頁規劃和網站設計中最為突出的問題是：1）首頁規劃和欄目設置不合理。主要表現在欄目設置有重疊、交叉、或者欄目名稱意義不明確，容易造成混淆，使得用戶難以發現需要的信息。2）重要信息不完整問題。企業介紹、聯系方式、產品分類和詳細介紹、產品促銷等是企業網站最基本的信息，但為數不少的企業對這些重要信息不完整，尤其是產品介紹過於簡單，有些甚至沒有公布任何聯系方式；上述幾個問題只是企業網站設計問題中的部分問題，還有考慮瀏覽目標群體，從營銷方式設計都應該是現在企業網站所在考慮的問題。每一個細微的不足和問題，都有可能失去用戶，或者根本無法獲得被用戶發現的機會，結果最明顯的表現就是訪問量很小，或者由於得不到有價值的信息和服務，訪問者的轉化率很低，無法取得最終的收益。

4、交互設計師需要從什麼做起？網頁設計嗎？

首先很抱歉，我基本沒做過網頁設計，所以沒辦法把網頁設計和其他設計的區別講清楚。
然後是我對於這個問題的一些個人看法，供參考。
我的理解，各種設備或者不同平台的設計區別，在於規范。我看到過一些大網站公司的guideline，其實都一樣，無非是規定行間距，字型大小字體，標准色等等，這是大工業生產時代下總結出來的標准化流程，可以極大的提升生產效率和規范品牌。這個不需要設計師，隨便找個應屆生或者操作類都可以干。
而設計師的價值是什麼，就是感覺，設計師的感覺和用戶的感覺，還有這兩種感覺的快速契合。我在去年面試設計師時看到一個網頁作品，一個旅遊網站，因為老闆非常喜歡微軟的新設計風格，所以這個網站的視覺設計也用了Metro。好嗎？我當時問過這個設計師這樣一個問題。其實單純的說設計都沒有問題，和別人不同也是一種創新。但是你的主營業務是否第一時間被你的設計傳遞給用戶並打動了他，這就是感覺，是設計師的任務。一個用戶來到這個網站，看到了一個個單純的色塊，中間用簡單的文字和宋體字，估計用戶很難有馬上出去玩的沖動。為什麼很多旅遊網站的設計都是用青山，海景來做背景，就是為了讓看官們的心理產生劇烈的對比和苦悶，「TMD我一苦BXXX... ...我一定要去海邊...」，此類的心聲一旦產生，這生意就有可能做成了。
還有一個例子，我的產品前幾天要做一個LOGO，設計師問我該怎麼做，核心的承載體應該是什麼，我當時給了他一個建議，如果你找不到承載體，就做一個絕對漂亮的東西，讓產品經理看到後欲罷不能，非此不可。但是後面連續幾稿都不行，其實不是承載體的問題，而是感覺的問題。最後的解決方法也很簡單，我讓他在網上搜所有「貓王」和「拉斯維加斯」的圖片，很快方案通過了。其實就是用一種感覺去打動產品經理的感覺，這事就對了。
啰啰嗦嗦一大堆，希望能夠幫到你。

5、交互設計規范應該包含的哪些內容

當產品規模大了之後就需要多個產品設計師協作完成整個產品，由於不同產品設計師之間的設計理念、設計方法、設計習慣的不同，協作完成的產品往往會導致產品一致性差，質量參差不齊。

這個時候會需要一份交互設計規范來規范和指導產品設計，從而保證產品設計的一致性，提升整體產品質量。

蘋果與安卓交互設計體現在對話框細節

本文就來說一說交互設計規范應該包含的一些內容：

一、頁面信息規范

頁面信息規范主要指頁面的靜態信息應該遵循的規則，包括：

1.標題規范

用於規定整個產品中所有不同層級不同功能的頁面應該使用的標題的規則。

2.新窗口鏈接規范

用於規定頁面鏈接是採用新窗口打開還是本窗口打開的規則。

3.圖片規范

用於規定圖片信息是否帶有alt title值，這些值又取自那裡。

Reeoo菜單標志設計與側邊交互設計

二、交互信息規范

交互提示規范主要用於規定在交互過程中交互的方式及其信息提示，包括：

1.預先信息提示

所有交互進行前需要提供充分給用戶的預先應該知道的提示信息。

a.表單提交類

表單提交的步驟，每個表單項的要求需要給出提示信息。（如密碼要多少多少位。搜索框鼓勵輸入什麼內容。）

b.謹慎類操作

一個操作對用戶來說需要慎重操作的。如扣除金幣等。需要預先提示。（如：扣除金幣的操作需要預先提示扣除金幣數目，以及當前金幣是否足夠。等等。）

c.差異化規則

當一個功能的規則與用戶習慣的規則具有一定的差異或比較復雜時，需要給出提示。或者給出幫助鏈接。

2、操作信息提示

所有交互進行中需要提供操作相關的提示。

a.操作確認提示

一個操作涉及數據刪除，等需要謹慎操作的操作需要給出刪除確認提示框。

b.操作錯誤提示

當用戶的操作不符合操作的規則，需要給出操作提示。（如評論字數為0或超過限制字數，搜索框未輸入內容時提交）

網站內容設計：交互設計解析

3、結果信息提示

交互進行後給出結果反饋是應該給出適當的提示

a.查詢類結果

任何信息列表、查詢結果，當對應信息無結果的時候需要給出有無結果狀態提示。

b.保存類結果

一個表單是用戶提交保存數據的。如設置個人資料。提交保存後需要給出提示。成功綠色、失敗紅色、普通灰色。

c.附加類結果

一個表單是對其他數據進行附加的，如評論等。提交成功後應直接跳轉到操作產生的結果展示部分。（如提交評論後應該直接展示給用戶他提交的評論）

交互設計是網站與用戶交流的基本原則

三、通用控制項規范

當有一些功能會被多個模塊復用的時候（如標准評論框、標准好友選擇器等），需要把這些功能提煉出來設計成通

用控制項被多個模塊共用。

有了頁面信息規范、交互信息規范、通用控制項規范就能保證頁面信息的一致、交互方式及提示的一致、通用功能模塊一致。從而保證產品的一致性，並提高產品質量。

6、什麼才是網站正確的交互設計方式

交互指的是產品與它的使用者之間的互動過程，而交互設計師則是秉承以用戶為中心的設計理念，以用戶體驗度為原則，對交互過程進行研究並開展設計的工作人員。

交互設計（InteractionDesign）是指設計師對產品與它的使用者之間的互動機制進行分析、預測、定義、規劃、描述和探索的過程，即定義人造物的行為方式。作為一門關注交互體驗的新學科在二十世紀八十年代產生了，它由IDEO的一位創始人比爾·莫格里奇在1984年一次設計會議上提出，他一開始給它命名為「軟面（SoftFace）」，他後來把它更名為「Interaction Design」――交互設計

交互設計師善於表達，以網頁語言表達產品所要告訴用戶的信息，同時顯示用戶的操作功能。

所以，凡是涉及到表達、傳達的問題，都可以找交互設計師來做，也應該由交互設計師來做。產品經理考慮要做什麼產品才有價值，交互設計師考慮怎麼把這個想法最有效的轉化成一系列的界面展現給用戶。除了展現，還有和用戶的交互。這個展現、交互的過程就需要一定的表達能力。這種表達能力並不是我們平時所特指的口頭表達，而是使用網頁語言表達。我們經常會討論一個按鈕的位置，討論某個狀態下游標的樣式，討論應該寫成「登錄」而非「登陸」等等：這些都是網頁語言表達。

7、交互設計的四要素如何影響網站產品設計

交互設計的四要素
從新的定義中可提煉出交互設計的幾點要素：
•業務邏輯是考慮一切問題的關鍵點。要想做出好的高端設計，不管在任何一個層面上都不能忽略業務邏輯。
•在業務邏輯正確的基礎上，只要任務流程設計的正確，一般來說產品就是可用的;忽視了任務流程的設計(尤其是大型產品)，產品將是不可用的。
•分析心理模型對於理解業務邏輯、優化任務流程、提升用戶體驗都有重要的作用。
•熟悉交互規范可以避免在框架層出現錯誤
業務邏輯、任務流程、心理模型、交互規范在設計網站的不同階段中都起著重要作用。這就意味著對於一個交互設計師來說，只懂交互知識對於做好一個產品的設計是遠遠不夠的。

8、用什麼工具做一個網站交互設計

如果你也喜歡深澤直人，你一定見過這款Muji CD機，它就如一個風扇，下面一條拉繩。人們看到這個形態感覺很熟悉，覺得有親切感。似乎在哪裡見過。無意識的就去拉下了繩子，音樂響起。再拉動一下，音樂停止。操作如果簡單，完全不需要使用說明書。拋開Muji CD機極具創意的外形來看它的播放過程。它只有一個向下拉的操作，極致簡單的設計美學。另一方面它，打開開關，它並不會立即啟動，而是間隔一下，音樂隨即開始，設計師彷彿在營造一種聲音從遠方傳來的意境，親切而舒適。我想這就是節奏的一個表象，實際上這種稍顯延遲的設計也同樣出現在iPhone發布時的一個場景，Jobs聽著音樂而此時他的同事打來電話，音樂緩慢落下轉換為鈴聲，到通話結束，一個小的間隔之後，音樂響起。類比前面的兩個例子。Muji CD機的，功能會讓位於設計，如將曲目切換，音量調節被放置在不方便操作的位置，這種強調設計意志的產品有時會給人一些設計師孤芳自賞的感覺，所以可以將這種優雅比作是設計師式的優雅，當我們的團隊有了足夠和行業領導力以及頂尖的設計水平之時，便可以嘗試用這種設計師式的優雅去引領潮流。（此段後半段取自我曾經的摘錄）

每次看他的作品都是一次視覺的享受，每次拜讀他的文字和觀點都是一次觀念的洗禮。今天對於作品分析先寫到這里。日後若想到一些，我會及時補充到這里。希望今後的工作中，我們能把「無意識的設計」理念帶入到網站交互設計中。

用深澤直人的一句話來做結尾：設計一件東西往往和我們無意識的行為和我們周圍的環境有關。思考需要時間，感覺則可能在片刻內完成。一件物品給你的第一感覺很重要，而當使用了一段時間之後你會發現你最初失掉的感覺才是設計的精髓所在。這就是「不假思索」背後的含義。

9、web交互設計和網頁設計有什麼區別

交互，肯定就是前端收集數據，然後交給後台進行處理噻。
網頁設計稍微簡單一些