中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

成都搭建網(wǎng)站費(fèi)用

2022-07-04    分類： 網(wǎng)站建設(shè)

成都搭建網(wǎng)站費(fèi)用  創(chuàng)新互聯(lián)千元起建精品網(wǎng)站

10個(gè)基本的UI（用戶界面）設(shè)計(jì)技巧

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

關(guān)鍵是首先，始終和永遠(yuǎn)考慮您的用戶。

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

界面設(shè)計(jì)著重于界面功能的布局，是用戶體驗(yàn)設(shè)計(jì)的子集，用戶體驗(yàn)設(shè)計(jì)著眼于更大的圖景：即整個(gè)體驗(yàn)，而不僅僅是界面。

1.了解您的用戶
最重要的是，您必須了解內(nèi)部和外部用戶的身份。是的，這意味著知道您的分析應(yīng)用程序可以提取的所有人口統(tǒng)計(jì)數(shù)據(jù)。但更重要的是，這意味著知道他們的需求，以及阻礙他們實(shí)現(xiàn)目標(biāo)的方式。

要達(dá)到同等水平，不僅需要仔細(xì)分析統(tǒng)計(jì)數(shù)據(jù)。它需要了解使用您網(wǎng)站的人。這意味著與他們面對(duì)面交談，看著他們使用您的產(chǎn)品（可能還有其他產(chǎn)品），并向他們提出比“您如何看待這種設(shè)計(jì)？”更深入的問題。

他們的目標(biāo)是什么？他們實(shí)現(xiàn)這些目標(biāo)的方式是什么？網(wǎng)站如何幫助他們克服或應(yīng)對(duì)這些挑戰(zhàn)？

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

您將從分析數(shù)據(jù)和與用戶交談中發(fā)現(xiàn)的見解將指導(dǎo)您做出的每個(gè)決定，從人們?nèi)绾问褂媚慕缑娴侥鷮⒃谠摻缑嬷型怀鲲@示的內(nèi)容類型。

2.定義人們?nèi)绾问褂媚慕缑?/div>
在設(shè)計(jì)界面之前，您需要定義人們將如何使用它。隨著基于觸摸的設(shè)備的普及，這是您可能想不到的更為關(guān)鍵的問題?？纯?nbsp;

火種：該應(yīng)用程序的用戶體驗(yàn)實(shí)際上是由簡單的滑動(dòng)即可實(shí)現(xiàn)的。

人們以兩種方式使用網(wǎng)站和應(yīng)用程序：直接（通過與產(chǎn)品的界面元素進(jìn)行交互）和間接（通過與產(chǎn)品外部的ui元素進(jìn)行交互）。

直接互動(dòng)的例子
輕按一個(gè)按鈕
刷卡
用指尖拖放項(xiàng)目
間接互動(dòng)的例子
用鼠標(biāo)指向和單擊
使用按鍵命令/快捷方式
輸入表單字段
在Wacom平板電腦上繪圖

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

3.設(shè)定期望
與網(wǎng)站或應(yīng)用程序的許多交互都會(huì)產(chǎn)生后果：單擊按鈕可能意味著花錢，刪除網(wǎng)站或?qū)δ棠痰纳盏案獍l(fā)表貶低的評(píng)論。每當(dāng)有后果時(shí)，都會(huì)有焦慮。

因此，請(qǐng)務(wù)必讓用戶知道在單擊該按鈕之后將要發(fā)生的情況。您可以通過設(shè)計(jì)和/或復(fù)制來做到這一點(diǎn)。

通過設(shè)計(jì)設(shè)定期望 
突出顯示與所需操作對(duì)應(yīng)的按鈕
與復(fù)制結(jié)合使用廣泛使用的符號(hào)（例如用于刪除按鈕的垃圾桶，用于添加內(nèi)容的加號(hào)或用于搜索的放大鏡）
選擇具有相關(guān)含義的顏色（綠色表示“開始”按鈕，紅色表示“停止”）
用副本設(shè)定期望
編寫清除按鈕副本
在空狀態(tài)下提供定向/鼓勵(lì)性副本
發(fā)出警告并要求確認(rèn)
對(duì)于具有不可逆轉(zhuǎn)后果的操作，例如永久刪除某些內(nèi)容，最好問人們是否確定。


在InVision中，單擊垃圾桶圖標(biāo)不會(huì)立即刪除屏幕。相反，它詢問您是否確定，并告知您無法撤消。
4.預(yù)期錯(cuò)誤
犯錯(cuò)是人的；原諒，神圣。

亞歷山大·波普（Alexander Pope），《批評(píng)論文》

人們會(huì)犯錯(cuò)誤，但他們（永遠(yuǎn)）不必承擔(dān)后果。有兩種方法可以減少人為錯(cuò)誤的影響：

防止錯(cuò)誤發(fā)生
提供在它們發(fā)生后修復(fù)它們的方法
您會(huì)在電子商務(wù)和表單設(shè)計(jì)中看到很多防止錯(cuò)誤的技術(shù)。在填寫所有字段之前，按鈕將保持不活動(dòng)狀態(tài)。表單檢測到電子郵件地址輸入不正確。彈出式窗口會(huì)詢問您是否真的要放棄購物車（是的，我愿意，亞馬遜-不管它有多可悲，它都會(huì)嚇到你）。

預(yù)期錯(cuò)誤通常比嘗試在發(fā)生故障后予以糾正的沮喪程度要小。這是因?yàn)樗鼈儼l(fā)生在可以單擊“下一步”或“提交”按鈕所帶來的令人滿意的完成感之前。

也就是說，有時(shí)您只需要讓事故發(fā)生即可。那是真正的詳細(xì)錯(cuò)誤消息出現(xiàn)的時(shí)候。

在編寫錯(cuò)誤消息時(shí)，請(qǐng)確保它們執(zhí)行以下兩項(xiàng)操作：

解釋問題。例如，“您說您是在火星上出生的，人類還沒有殖民過。然而?！?/div>
說明如何解決。例如，“請(qǐng)?jiān)诘厍蛏线M(jìn)入出生地。”
請(qǐng)注意，對(duì)于非錯(cuò)誤情況，您可以從同一本書中摘錄。例如，如果我刪除了某些內(nèi)容，但可以還原它，請(qǐng)告知我，帶有一行復(fù)制內(nèi)容，例如“您始終可以通過移至回收站并單擊還原來還原已刪除的項(xiàng)目。”

預(yù)期用戶錯(cuò)誤的原理稱為poka-yoke原理。Poka-yoke是日語術(shù)語，翻譯為“防錯(cuò)”。

5.快速提供反饋
在現(xiàn)實(shí)世界中，環(huán)境為我們提供了反饋。我們說話，而其他人則回應(yīng)（通常）。我們抓撓貓，貓會(huì)發(fā)出嘶嘶聲或嘶嘶聲（取決于貓的喜怒無常以及貓抓撓時(shí)的吸吮程度）。

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

所以給我加載動(dòng)畫。當(dāng)我點(diǎn)擊該按鈕時(shí)，使其彈出并彈回，但不要過多。當(dāng)我做某事時(shí)，給我一個(gè)虛擬的高五，我同意這太棒了。（感謝MailChimp。）


計(jì)劃或發(fā)送電子郵件時(shí)，MailChimp會(huì)提供反饋和鼓勵(lì)。
只要確保一切都快速進(jìn)行即可。Usability.gov將超過1秒的任何延遲定義為中斷。超過10秒鐘，中斷。而且后者很慷慨：對(duì)于大約一半的美國人口來說，三秒鐘足以引起反彈。

如果頁面將在5秒鐘內(nèi)加載，請(qǐng)不要顯示進(jìn)度條，因?yàn)樗鼘?shí)際上會(huì)使加載時(shí)間看起來更長。而是使用不暗示進(jìn)度的可視化效果，例如Mac臭名昭著的“死亡風(fēng)車”。但這不是。如果確實(shí)在網(wǎng)站上使用進(jìn)度條，請(qǐng)考慮嘗試一些視覺技巧以使加載看起來更快。

6.仔細(xì)考慮元素的放置和大小
菲茨定律是人機(jī)交互（HCI）的基本原理，它指出：

獲取目標(biāo)的時(shí)間取決于目標(biāo)的距離和大小。

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

將按鈕和其他“點(diǎn)擊目標(biāo)”（如圖標(biāo)和文本鏈接）設(shè)置得足夠大，以方便查看和點(diǎn)擊。這對(duì)于排版，菜單和其他鏈接列表尤為重要，因?yàn)榭臻g不足將使人們一次又一次地點(diǎn)擊錯(cuò)誤的鏈接。

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

將導(dǎo)航（以及其他常見的交互式視覺元素，如搜索欄）放在屏幕的邊緣或角落。最后一個(gè)看上去似乎違反直覺，但它之所以有效，是因?yàn)樗鼫p少了對(duì)準(zhǔn)確性的需求：用戶無需擔(dān)心過高的點(diǎn)擊目標(biāo)。

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

7.不要忽視標(biāo)準(zhǔn)
作為具有高度創(chuàng)造力的類型，設(shè)計(jì)師傾向于喜歡重塑事物，但這并不總是最好的主意。

為什么？因?yàn)槭煜さ慕换セ蚪缑娴母倪M(jìn)版本增加了“認(rèn)知負(fù)擔(dān)”：它使人們重新考慮他們已經(jīng)學(xué)習(xí)的過程。顯然，您可以重新發(fā)明所有想要的輪子，但前提是要切實(shí)改進(jìn)設(shè)計(jì)。

此經(jīng)驗(yàn)法則解釋了為什么Google文檔的菜單欄幾乎具有與Vista之前的Microsoft Word相同的所有選項(xiàng)：


在Vista之前的Microsoft Word菜單欄。


?2015年Google文檔菜單欄
?

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


更改單個(gè)按鈕使其與Android的設(shè)計(jì)模式更加一致，使新用戶繼續(xù)使用Pocket的可能性增加了23％。
截止到2013年秋季，存檔按鈕位于屏幕的左上角，即Android設(shè)計(jì)規(guī)范所說的“向上”按鈕應(yīng)位于的右上角。Pocket希望人們將注意力集中在閱讀體驗(yàn)上，而不是復(fù)制現(xiàn)有的硬件控制，但是這種不一致的位置導(dǎo)致新用戶不小心關(guān)閉并存檔了他們正在閱讀的文章，而不是簡單地按預(yù)期返回他們的閱讀列表。

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

8.使您的界面易于學(xué)習(xí)
在簡單性方面，人們經(jīng)常引用哈佛心理學(xué)家喬治·米勒（George Miller）發(fā)表的一篇論文，標(biāo)題為“神奇的數(shù)字7，正負(fù)2：對(duì)我們處理信息能力的限制”。這篇文章建議人們?cè)诙唐谟洃浿兄荒軗碛?到9種東西，而沒有任何可靠性。米勒本人稱這是一個(gè)巧合，但這似乎并沒有阻止任何人引用他。

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

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

大多數(shù)人在Word中只做一些事情（例如鍵入），而其他人則可以使用它來做各種功能強(qiáng)大的事情。但是在世界各地，每個(gè)人都使用相同的UI打開相同版本的Word，而普通的Joe（不是超級(jí)用戶）會(huì)被他們可能永遠(yuǎn)不會(huì)使用的各種選項(xiàng)所淹沒。

這導(dǎo)致了一個(gè)稱為漸進(jìn)公開的概念，其中高級(jí)功能隱藏在輔助接口上。您經(jīng)常會(huì)在網(wǎng)站的首頁上看到此信息，其中短篇幅的副本介紹了產(chǎn)品或功能，然后鏈接到用戶可以了解更多信息的頁面。（這也是移動(dòng)設(shè)計(jì)的實(shí)踐，在該設(shè)計(jì)中，強(qiáng)大的導(dǎo)航始終是一個(gè)挑戰(zhàn)。）

專家提示：避免在鏈接和按鈕中使用“了解更多”以及類似的非特定文本。為什么？因?yàn)樗粫?huì)告訴用戶他們將“了解更多”的知識(shí)。通常，人們只是瀏覽頁面以尋找將他們帶到想要去的鏈接，而“學(xué)習(xí)更多”（重復(fù)15次）無濟(jì)于事。對(duì)于屏幕閱讀器的用戶來說尤其如此。

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

有時(shí)候，我渴望一個(gè)平靜的網(wǎng)絡(luò)-?？怂苟山o了我們所有人建立一個(gè)網(wǎng)絡(luò)的理由。這個(gè)想法就像最終結(jié)果一樣簡單：向用戶展示的用戶界面選項(xiàng)越多，他們做出決定的難度就越大。

這幾乎影響了我們構(gòu)建的所有內(nèi)容：

整體布局
導(dǎo)航菜單
定價(jià)頁面
博客索引
內(nèi)容提要
清單繼續(xù)。但是結(jié)果是：我們進(jìn)行的設(shè)計(jì)越簡單，用戶做出我們希望他們做出的決定的速度就越容易。這就是為什么登陸頁面和非新聞郵件僅應(yīng)號(hào)召采取行動(dòng)的原因。

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

10.聆聽數(shù)據(jù)
盡管我們都希望我們的設(shè)計(jì)純粹是根據(jù)其藝術(shù)價(jià)值進(jìn)行評(píng)估，但現(xiàn)實(shí)是，優(yōu)化設(shè)計(jì)以實(shí)現(xiàn)其目標(biāo)同樣重要。


盡管我們都希望我們的設(shè)計(jì)純粹是根據(jù)其藝術(shù)價(jià)值進(jìn)行評(píng)估，但現(xiàn)實(shí)是，優(yōu)化設(shè)計(jì)以實(shí)現(xiàn)其目標(biāo)同樣重要。 

盡管用戶研究和測試在指導(dǎo)設(shè)計(jì)決策實(shí)現(xiàn)站點(diǎn)目標(biāo)方面非常有用，但是啟動(dòng)后收集的數(shù)據(jù)仍然非常寶貴。

因此，請(qǐng)為您的網(wǎng)站設(shè)置分析并定期進(jìn)行分析。有很多不同的分析工具，但我建議根據(jù)項(xiàng)目類型使用Google Analytics（分析）和/或Mixpanel。

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

注意：這兩個(gè)工具最多可免費(fèi)使用一定數(shù)量的數(shù)據(jù)點(diǎn)。Webflow和類似平臺(tái)通常通過簡單的API密鑰交換使分析設(shè)置變得容易。

Webflow網(wǎng)站中出色的交互設(shè)計(jì)
許多使用Webflow的設(shè)計(jì)師已應(yīng)用這些準(zhǔn)則來構(gòu)建直觀且引人入勝的交互。這里有幾個(gè)例子。

展開圓圈導(dǎo)航

Waldo Broodryk創(chuàng)建了一個(gè)有趣的移動(dòng)和桌面友好動(dòng)畫菜單。在頁面加載時(shí)，右下方的圓圈顯示為“菜單”。單擊時(shí)，它會(huì)展開以顯示可用的頁面并更改為X，從而允許用戶關(guān)閉菜單并重新關(guān)注內(nèi)容。

這是一個(gè)清晰而引人入勝的設(shè)計(jì)的好組合，并且密切關(guān)注Fitts定律：最容易將鏈接定位到屏幕邊緣。當(dāng)您不想在導(dǎo)航中隱含層次結(jié)構(gòu)時(shí)，循環(huán)導(dǎo)航是一個(gè)有趣的選擇。

你給那個(gè)女孩喝一杯嗎？

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

優(yōu)衣庫重新設(shè)計(jì)
uniqlo替代主頁
一天，設(shè)計(jì)師Tim Noah在Uniqlo網(wǎng)站上購物時(shí)，他意識(shí)到他們的導(dǎo)航系統(tǒng)多么復(fù)雜和獨(dú)特。受此啟發(fā)，他決定“ 以更加平板電腦和移動(dòng)設(shè)備友好的方式重新創(chuàng)建它?！?/div>
我最喜歡的事情是他如何將Uniqlo的多級(jí)導(dǎo)航轉(zhuǎn)換為單頁體驗(yàn)，該導(dǎo)航需要幾次單擊和頁面加載才能遍歷該品牌的實(shí)際桌面網(wǎng)站。（公平地說，優(yōu)衣庫在其移動(dòng)網(wǎng)站上做同樣的事情，但這是一個(gè)移動(dòng)子域，而不是其桌面網(wǎng)站的響應(yīng)版本。）

注意：此重新設(shè)計(jì)僅是個(gè)人項(xiàng)目，絕不與優(yōu)衣庫相關(guān)。

運(yùn)動(dòng)加速器
開始領(lǐng)導(dǎo) 
2017年初，設(shè)計(jì)師Jaro Quastenberg開設(shè)了一個(gè)網(wǎng)站，該網(wǎng)站真正展示了Webflow中視覺交互的力量：Lead Sport Accelerator。

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

從菜單到滾動(dòng)交互–這是關(guān)于某些人認(rèn)為是藝術(shù)作品的優(yōu)化功能的一個(gè)很好的例子。

好的，您已經(jīng)掌握了基礎(chǔ)知識(shí)
現(xiàn)在繼續(xù)制作一些華麗的可用界面。并且隨時(shí)可以分享您在評(píng)論中在全球范圍內(nèi)看到的和最差的UI設(shè)計(jì)示例。

當(dāng)前標(biāo)題：成都搭建網(wǎng)站費(fèi)用
網(wǎng)頁地址：http://www.rwnh.cn/news/174408.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、電子商務(wù)、域名注冊(cè)、營銷型網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

古交市| 兰西县| 常德市| 石泉县| 岫岩| 石渠县| 武平县| 色达县| 濉溪县| 天柱县| 孝义市| 胶州市| 永仁县| 沙湾县| 德州市| 巧家县| 盐源县| 霸州市| 潼南县| 兴和县| 株洲市| 漳浦县| 呼伦贝尔市| 宿州市| 九龙县| 永胜县| 盐城市| 威信县| 噶尔县| 双峰县| 湛江市| 锡林郭勒盟| 德兴市| 奎屯市| 教育| 本溪| 东安县| 满城县| 马山县| 太仓市| 霍邱县|