成都搭建網站費用

2022-07-04 分類：網站建設

成都搭建網站費用創新互聯千元起建精品網站

10個基本的UI（用戶界面）設計技巧

網站不僅僅是通過鏈接連接的一組頁面。它是一個界面，一個空間，不同的事物（在這種情況下，一個人和一個公司或個人的Web形象）會面，交流并相互影響。這種互動為訪問者創造了一種體驗，作為一名網頁設計師，確保體驗盡可能好是您的工作。

關鍵是首先，始終和永遠考慮您的用戶。

值得慶幸的是，雖然網頁設計是一門相對較新的學科，但它很大程度上歸功于人機交互（HCI）的科學研究。這些直接來自HCI研究的9條實用指南將幫助您在設計網站和應用程序時專注于用戶。

界面設計著重于界面功能的布局，是用戶體驗設計的子集，用戶體驗設計著眼于更大的圖景：即整個體驗，而不僅僅是界面。

1.了解您的用戶

最重要的是，您必須了解內部和外部用戶的身份。是的，這意味著知道您的分析應用程序可以提取的所有人口統計數據。但更重要的是，這意味著知道他們的需求，以及阻礙他們實現目標的方式。

要達到同等水平，不僅需要仔細分析統計數據。它需要了解使用您網站的人。這意味著與他們面對面交談，看著他們使用您的產品（可能還有其他產品），并向他們提出比“您如何看待這種設計？”更深入的問題。

他們的目標是什么？他們實現這些目標的方式是什么？網站如何幫助他們克服或應對這些挑戰？

不要停止了解您的用戶想要什么。深入挖掘并找出他們的需求。畢竟，欲望只是需求的產物。如果您可以解決用戶的根深蒂固的需求，那么您將在滿足他們最基本需求的同時滿足他們的需求。

您將從分析數據和與用戶交談中發現的見解將指導您做出的每個決定，從人們如何使用您的界面到您將在該界面中突出顯示的內容類型。

2.定義人們如何使用您的界面

在設計界面之前，您需要定義人們將如何使用它。隨著基于觸摸的設備的普及，這是您可能想不到的更為關鍵的問題。看看

火種：該應用程序的用戶體驗實際上是由簡單的滑動即可實現的。

人們以兩種方式使用網站和應用程序：直接（通過與產品的界面元素進行交互）和間接（通過與產品外部的ui元素進行交互）。

直接互動的例子

輕按一個按鈕

刷卡

用指尖拖放項目

間接互動的例子

用鼠標指向和單擊

使用按鍵命令/快捷方式

輸入表單字段

在Wacom平板電腦上繪圖

有時，交互太簡單了。

您的用戶是誰，以及他們使用什么設備應在這里深刻地影響您的決定。如果您是為老年人或其他手腳靈活性有限的人設計的，那么您就不想依靠刷卡了。如果您是為主要通過鍵盤與應用程序交互的作家或編碼人員設計的，則需要支持所有常見的鍵盤快捷鍵，以大程度地減少使用鼠標的時間。

3.設定期望

與網站或應用程序的許多交互都會產生后果：單擊按鈕可能意味著花錢，刪除網站或對奶奶的生日蛋糕發表貶低的評論。每當有后果時，都會有焦慮。

因此，請務必讓用戶知道在單擊該按鈕之后將要發生的情況。您可以通過設計和/或復制來做到這一點。

通過設計設定期望

突出顯示與所需操作對應的按鈕

與復制結合使用廣泛使用的符號（例如用于刪除按鈕的垃圾桶，用于添加內容的加號或用于搜索的放大鏡）

選擇具有相關含義的顏色（綠色表示“開始”按鈕，紅色表示“停止”）

用副本設定期望

編寫清除按鈕副本

在空狀態下提供定向/鼓勵性副本

發出警告并要求確認

對于具有不可逆轉后果的操作，例如永久刪除某些內容，最好問人們是否確定。

在InVision中，單擊垃圾桶圖標不會立即刪除屏幕。相反，它詢問您是否確定，并告知您無法撤消。

4.預期錯誤

犯錯是人的；原諒，神圣。

亞歷山大·波普（Alexander Pope），《批評論文》

人們會犯錯誤，但他們（永遠）不必承擔后果。有兩種方法可以減少人為錯誤的影響：

防止錯誤發生

提供在它們發生后修復它們的方法

您會在電子商務和表單設計中看到很多防止錯誤的技術。在填寫所有字段之前，按鈕將保持不活動狀態。表單檢測到電子郵件地址輸入不正確。彈出式窗口會詢問您是否真的要放棄購物車（是的，我愿意，亞馬遜-不管它有多可悲，它都會嚇到你）。

預期錯誤通常比嘗試在發生故障后予以糾正的沮喪程度要小。這是因為它們發生在可以單擊“下一步”或“提交”按鈕所帶來的令人滿意的完成感之前。

也就是說，有時您只需要讓事故發生即可。那是真正的詳細錯誤消息出現的時候。

在編寫錯誤消息時，請確保它們執行以下兩項操作：

解釋問題。例如，“您說您是在火星上出生的，人類還沒有殖民過。然而。”

說明如何解決。例如，“請在地球上進入出生地。”

請注意，對于非錯誤情況，您可以從同一本書中摘錄。例如，如果我刪除了某些內容，但可以還原它，請告知我，帶有一行復制內容，例如“您始終可以通過移至回收站并單擊還原來還原已刪除的項目。”

預期用戶錯誤的原理稱為poka-yoke原理。Poka-yoke是日語術語，翻譯為“防錯”。

5.快速提供反饋

在現實世界中，環境為我們提供了反饋。我們說話，而其他人則回應（通常）。我們抓撓貓，貓會發出嘶嘶聲或嘶嘶聲（取決于貓的喜怒無常以及貓抓撓時的吸吮程度）。

數字接口常常無法提供太多回報，這使我們想知道是否應該重新加載頁面，重新啟動筆記本電腦，還是只是將其彈出最近的可用窗口。

所以給我加載動畫。當我點擊該按鈕時，使其彈出并彈回，但不要過多。當我做某事時，給我一個虛擬的高五，我同意這太棒了。（感謝MailChimp。）

計劃或發送電子郵件時，MailChimp會提供反饋和鼓勵。

只要確保一切都快速進行即可。Usability.gov將超過1秒的任何延遲定義為中斷。超過10秒鐘，中斷。而且后者很慷慨：對于大約一半的美國人口來說，三秒鐘足以引起反彈。

如果頁面將在5秒鐘內加載，請不要顯示進度條，因為它實際上會使加載時間看起來更長。而是使用不暗示進度的可視化效果，例如Mac臭名昭著的“死亡風車”。但這不是。如果確實在網站上使用進度條，請考慮嘗試一些視覺技巧以使加載看起來更快。

6.仔細考慮元素的放置和大小

菲茨定律是人機交互（HCI）的基本原理，它指出：

獲取目標的時間取決于目標的距離和大小。

換句話說：物體越近和/或越大，將光標（或手指）放在上面的速度就越快。顯然，這對交互和用戶界面設計技術具有各種含義，但是最重要的三個是：

將按鈕和其他“點擊目標”（如圖標和文本鏈接）設置得足夠大，以方便查看和點擊。這對于排版，菜單和其他鏈接列表尤為重要，因為空間不足將使人們一次又一次地點擊錯誤的鏈接。

將最常見操作的按鈕放大并突出顯示。

將導航（以及其他常見的交互式視覺元素，如搜索欄）放在屏幕的邊緣或角落。最后一個看上去似乎違反直覺，但它之所以有效，是因為它減少了對準確性的需求：用戶無需擔心過高的點擊目標。

在考慮元素放置和大小時，請始終牢記交互模型。如果您的網站需要水平滾動而不是垂直滾動，則需要考慮在何處以及如何將這種異常的交互類型提示用戶。

7.不要忽視標準

作為具有高度創造力的類型，設計師傾向于喜歡重塑事物，但這并不總是最好的主意。

為什么？因為熟悉的交互或界面的改進版本增加了“認知負擔”：它使人們重新考慮他們已經學習的過程。顯然，您可以重新發明所有想要的輪子，但前提是要切實改進設計。

此經驗法則解釋了為什么Google文檔的菜單欄幾乎具有與Vista之前的Microsoft Word相同的所有選項：

在Vista之前的Microsoft Word菜單欄。

?2015年Google文檔菜單欄

這也解釋了為什么幾年前Pocket必須更改其Android應用程序中存檔按鈕的位置。

更改單個按鈕使其與Android的設計模式更加一致，使新用戶繼續使用Pocket的可能性增加了23％。

截止到2013年秋季，存檔按鈕位于屏幕的左上角，即Android設計規范所說的“向上”按鈕應位于的右上角。Pocket希望人們將注意力集中在閱讀體驗上，而不是復制現有的硬件控制，但是這種不一致的位置導致新用戶不小心關閉并存檔了他們正在閱讀的文章，而不是簡單地按預期返回他們的閱讀列表。

這一微小的變化“使[新用戶]從現在起繼續使用Pocket的可能性增加了23％”。

8.使您的界面易于學習

在簡單性方面，人們經常引用哈佛心理學家喬治·米勒（George Miller）發表的一篇論文，標題為“神奇的數字7，正負2：對我們處理信息能力的限制”。這篇文章建議人們在短期記憶中只能擁有5到9種東西，而沒有任何可靠性。米勒本人稱這是一個巧合，但這似乎并沒有阻止任何人引用他。

就是說，邏輯越簡單，在短期內記住起來就越容易。因此，只要有可能，就限制一個人有效使用界面需要記住的事物數量。您可以通過對信息進行分塊來簡化此過程，即將其分成可消化的小塊。

這個想法與Tesler的“復雜性守恒定律”相吻合，該定律指出UI設計人員應使其界面盡可能簡單。這可能意味著在可能的情況下掩蓋簡化界面后的應用程序的復雜性。Microsoft Word是產品不遵守該法律的流行示例。

大多數人在Word中只做一些事情（例如鍵入），而其他人則可以使用它來做各種功能強大的事情。但是在世界各地，每個人都使用相同的UI打開相同版本的Word，而普通的Joe（不是超級用戶）會被他們可能永遠不會使用的各種選項所淹沒。

這導致了一個稱為漸進公開的概念，其中高級功能隱藏在輔助接口上。您經常會在網站的首頁上看到此信息，其中短篇幅的副本介紹了產品或功能，然后鏈接到用戶可以了解更多信息的頁面。（這也是移動設計的實踐，在該設計中，強大的導航始終是一個挑戰。）

專家提示：避免在鏈接和按鈕中使用“了解更多”以及類似的非特定文本。為什么？因為它不會告訴用戶他們將“了解更多”的知識。通常，人們只是瀏覽頁面以尋找將他們帶到想要去的鏈接，而“學習更多”（重復15次）無濟于事。對于屏幕閱讀器的用戶來說尤其如此。

9.簡化決策

太多的網絡尖叫著我們：“橫幅廣告”突然擴展為全屏廣告。模式彈出，迫使我們訂閱我們還沒有機會閱讀的博客。視頻插頁式廣告將我們擋在了軌道上，迫使我們觀看寶貴的秒數。甚至不要讓我開始使用小部件，彈出按鈕，工具提示...

有時候，我渴望一個平靜的網絡-希克斯定律給了我們所有人建立一個網絡的理由。這個想法就像最終結果一樣簡單：向用戶展示的用戶界面選項越多，他們做出決定的難度就越大。

這幾乎影響了我們構建的所有內容：

整體布局

導航菜單

定價頁面

博客索引

內容提要

清單繼續。但是結果是：我們進行的設計越簡單，用戶做出我們希望他們做出的決定的速度就越容易。這就是為什么登陸頁面和非新聞郵件僅應號召采取行動的原因。

專家提示：有時，您實際上確實希望用戶放慢速度并考慮他們的選擇。這就是Pinterest，Dribbble和許多博客的平鋪設計實際上運行良好的原因。畢竟，您必須決定的選項越多，找到適合您的選項的可能性就越大。

10.聆聽數據

盡管我們都希望我們的設計純粹是根據其藝術價值進行評估，但現實是，優化設計以實現其目標同樣重要。

盡管用戶研究和測試在指導設計決策實現站點目標方面非常有用，但是啟動后收集的數據仍然非常寶貴。

因此，請為您的網站設置分析并定期進行分析。有很多不同的分析工具，但我建議根據項目類型使用Google Analytics（分析）和/或Mixpanel。

Mixpanel專注于事件，因此它根據訪問者在您的網站上執行的操作來收集數據，而Google Analytics（分析）則更具行為性，為您提供會話時間，訪問量來源等。雖然這兩種工具都可以提供兩種形式的數據，但它們的確在閃耀他們的重點領域，因此請選擇最適合您的需求。

注意：這兩個工具最多可免費使用一定數量的數據點。Webflow和類似平臺通常通過簡單的API密鑰交換使分析設置變得容易。

Webflow網站中出色的交互設計

許多使用Webflow的設計師已應用這些準則來構建直觀且引人入勝的交互。這里有幾個例子。

展開圓圈導航

Waldo Broodryk創建了一個有趣的移動和桌面友好動畫菜單。在頁面加載時，右下方的圓圈顯示為“菜單”。單擊時，它會展開以顯示可用的頁面并更改為X，從而允許用戶關閉菜單并重新關注內容。

這是一個清晰而引人入勝的設計的好組合，并且密切關注Fitts定律：最容易將鏈接定位到屏幕邊緣。當您不想在導航中隱含層次結構時，循環導航是一個有趣的選擇。

你給那個女孩喝一杯嗎？

設計師Shane Hurt匯集了這個令人驚嘆的交互式決策樹，可幫助您決定是否向該女孩購買飲料。該設計包含大量內容，但讓您專注于手頭的任務：回答當前問題，然后繼續進行決策。Shane是保持界面簡單的方法。

優衣庫重新設計

uniqlo替代主頁

一天，設計師Tim Noah在Uniqlo網站上購物時，他意識到他們的導航系統多么復雜和獨特。受此啟發，他決定“ 以更加平板電腦和移動設備友好的方式重新創建它。”

我最喜歡的事情是他如何將Uniqlo的多級導航轉換為單頁體驗，該導航需要幾次單擊和頁面加載才能遍歷該品牌的實際桌面網站。（公平地說，優衣庫在其移動網站上做同樣的事情，但這是一個移動子域，而不是其桌面網站的響應版本。）

注意：此重新設計僅是個人項目，絕不與優衣庫相關。

運動加速器

開始領導

2017年初，設計師Jaro Quastenberg開設了一個網站，該網站真正展示了Webflow中視覺交互的力量：Lead Sport Accelerator。

該站點確實具有上述兩個技巧。第一：了解您的用戶。Lead Sports Accelerator知道他們正在努力吸引產品制造商，為此，他們必須通過其網站給人留下深刻的第一印象。第二是提供反饋。無論您是滾動，懸停還是單擊頁面上的元素，它都會立即以生動有趣的方式響應訪問者的動作。

從菜單到滾動交互–這是關于某些人認為是藝術作品的優化功能的一個很好的例子。

好的，您已經掌握了基礎知識

現在繼續制作一些華麗的可用界面。并且隨時可以分享您在評論中在全球范圍內看到的和最差的UI設計示例。

新聞標題：成都搭建網站費用
文章URL：http://vcdvsql.cn/news8/174408.html

成都網站建設公司_創新互聯，為您提供云服務器、小程序開發、網站設計、用戶體驗、ChatGPT、全網營銷推廣

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

成都搭建網站費用