交互網頁(yè)設計技(jì )巧,創造好的用(yòng)戶體(tǐ)驗

作(zuò)者：遠(yuǎn)鴻助理(lǐ)網日期：2023-11-25 08:36:46

交互網頁(yè)設計技(jì )巧,創造好的用(yòng)戶體(tǐ)驗，網站建設中(zhōng)會采用(yòng)不同的格式，這些格式根據具(jù)體(tǐ)的需求而定，不同的格式也有(yǒu)不同的作(zuò)用(yòng)，在網站建設公(gōng)司所采用(yòng)的網頁(yè)格式中(zhōng)有(yǒu)靜态網頁(yè)和動态網頁(yè)等兩種，那麽不同格式的網頁(yè)都有(yǒu)什麽樣的特點和作(zuò)用(yòng)呢(ne)？第一、靜态網頁(yè)靜态網頁(yè)其實指的就是單一的超文(wén)件标示語言檔案，把不斷動态化發展的網頁(yè)處理(lǐ)得靜态之後就可(kě)以有(yǒu)效的提升産(chǎn)2018年1月份全球數字報告中(zhōng)提出，全球互聯網用(yòng)戶已突破40億，而中(zhōng)國(guó)55.8%的人口使用(yòng)互聯網，也就是7.72億人，且逐年上升。随着互聯網用(yòng)戶的增長(cháng)，需要一個界面友好，功能(néng)強大，實用(yòng)網站的人數也在增長(cháng)。好吧，那我們就來來談一談成熟的企業如何制作(zuò)經典的品牌網站。品牌網站制作(zuò)假設您具(jù)備有(yǒu)專業知識與技(jì )能(néng)選用(yòng)合适模闆，提升網站布局的靈活性和可(kě)擴展性在進行網站建設的過程中(zhōng)，模闆的選擇對于頁(yè)面布局的靈活性和可(kě)擴展性起着至關重要的作(zuò)用(yòng)。網站建設的模闆是指一套預先設計好的網頁(yè)樣式和元素，包含了網頁(yè)的布局、顔色、字體(tǐ)、導航條等各種元素，用(yòng)戶隻需根據自己的需求進行部分(fēn)修改即可(kě)形成自己的網站。優秀網站模闆的特點優

交互網頁(yè)設計技(jì )巧,創造好的用(yòng)戶體(tǐ)驗,一個好的用(yòng)戶界面具(jù)有(yǒu)較高的轉化率和易用(yòng)性。

深圳網站制作(zuò)

換句話說，它既能(néng)滿足商(shāng)業用(yòng)途也便于使用(yòng)。

深圳網站制作(zuò)

以下是我們發現的一些想法清單。　　前言：原文(wén)比較長(cháng)，共65條，我打算分(fēn)三次翻譯完，這是1-20條。　　1. 嘗試使用(yòng)一列布局代替多(duō)列　　一列布局會讓你對全局有(yǒu)更好的掌控。它也能(néng)讓你的用(yòng)戶預先對整體(tǐ)的内容從上到下有(yǒu)一個大緻的了解。然而多(duō)列布局則會讓用(yòng)戶從頁(yè)面的核心内容上分(fēn)散注意力從而增加額外的風險。最好的方法是用(yòng)一個有(yǒu)邏輯的叙述然後在文(wén)末加上一個行動的口号來引導用(yòng)戶。嘗試使用(yòng)一列布局代替多(duō)列　　2. 嘗試用(yòng)禮物(wù)代替直接銷售　　為(wèi)客戶提供一份禮物(wù)是一種友好的方式。然而，更深層次來說，禮物(wù)也是基于互惠原則的一種有(yǒu)效的說服策略。這聽起來顯而易見，給别人提供優惠，你在将來的活動中(zhōng)也能(néng)從中(zhōng)受益。嘗試用(yòng)禮物(wù)代替直接銷售　　3. 嘗試合并相似的功能(néng)，而不是支離破碎的UI　　在産(chǎn)品開發期間，我們很(hěn)容易在無意中(zhōng)創建多(duō)個功能(néng)一樣的模塊，元素及專題。随着時間的推移，界面變得支離破碎。留意相同的功能(néng)以多(duō)種方式展示，因為(wèi)它容易給你的客戶帶來壓力。通常，UI碎片越多(duō)，你的客戶的學(xué)習成本就越高。偶爾考慮通過合并相似的功能(néng)來重構你的UI。嘗試合并相似的功能(néng)，而不是支離破碎的UI　　4. 嘗試用(yòng)客戶評價來代替自吹自擂　　客戶評價是直接提高轉化率的另一個強有(yǒu)力的說服策略。别人對你産(chǎn)品的支持和好評，是一種很(hěn)好地号召客戶行動的方式。所以試着提供一些證據來證明這些好評是真實可(kě)信的。嘗試用(yòng)客戶評價來代替自吹自擂　　5. 嘗試多(duō)次重複您的主旨，而不是隻展示一次　　重複你的行動口号是一種更适用(yòng)于長(cháng)頁(yè)面的策略，或者是在多(duō)個頁(yè)面進行重複。當然你也不想讓同樣的信息在同一屏幕裏重複上10次，這會讓客戶很(hěn)沮喪。然而，長(cháng)頁(yè)面越來越普遍，将所有(yǒu)東西都展現“在一屏”上的想法也過時了。所以将一個不太顯眼的行動列表放在頂部，另一個突出的行動口号放在底部并沒有(yǒu)什麽不妥。當用(yòng)戶到達頁(yè)面底部，停頓并思考接下來改做什麽的時候——一個潛在的區(qū)域或許就能(néng)完成一次報價或成交一筆(bǐ)交易。嘗試多(duō)次重複您的主旨，而不是隻展示一次　　6. 嘗試将可(kě)點擊/可(kě)選擇的樣式區(qū)分(fēn)開來，而不是将其模糊　　視覺上的樣式，例如顔色、層次和對比，可(kě)以用(yòng)來幫助用(yòng)戶理(lǐ)解你最基礎的界面導航語言：我在哪裏，我可(kě)以到哪裏去。為(wèi)了與你的用(yòng)戶清楚地溝通，你的可(kě)點擊行為(wèi)（鏈接，按鈕）、可(kě)選元素（可(kě)選項），以及單純的文(wén)本應該清楚地區(qū)分(fēn)開來，然後在這一套界面中(zhōng)保持一緻性。在下面的例子中(zhōng)，我選擇藍色标識能(néng)被點擊的元素，黑色标識已被選中(zhōng)的元素或表明當前所在的位置。正确運用(yòng)這些标記，更便于用(yòng)戶學(xué)習和使用(yòng)這些線(xiàn)索來導航界面。不要模糊這三種功能(néng)樣式使産(chǎn)品使用(yòng)困難。嘗試将可(kě)點擊可(kě)選擇的樣式區(qū)分(fēn)開來，而不是将其模糊　　7. 嘗試用(yòng)推薦來代替羅列相同的選項　　當展示多(duō)種服務(wù)時，一個強力的推薦或許是個好主意，因為(wèi)用(yòng)戶有(yǒu)時候需要一點推動。一些心理(lǐ)學(xué)的研究表明，選擇性越多(duō)，用(yòng)戶将想法付諸實踐并行動起來的概率就越低。為(wèi)了消除這種選擇障礙，試着強調和突出顯示某些選項。嘗試用(yòng)推薦來代替羅列相同的選項　　8. 嘗試用(yòng)撤銷操作(zuò)來代替提示确認　　想象一下，你隻是按下了一個操作(zuò)按鈕或者鏈接，撤銷能(néng)讓操作(zuò)更流暢自然。另一方面，提示操作(zuò)則在暗示用(yòng)戶不清楚用(yòng)戶在幹什麽，并一直質(zhì)疑用(yòng)戶的意圖。大部分(fēn)情況下我會假設用(yòng)戶是明白自己的意圖的，誤操作(zuò)隻是偶然發生的。當提示窗口彈出時，用(yòng)戶必須重複地進行确認操作(zuò)，一次又(yòu)一次的提示其實是一種非常不人性化的設計。所以考慮讓用(yòng)戶執行撤銷操作(zuò)來提高産(chǎn)品的友好度而不是一直提醒用(yòng)戶确認。嘗試用(yòng)撤銷操作(zuò)來代替提示确認　　9. 嘗試寫明産(chǎn)品使用(yòng)人群而不是所有(yǒu)人　　你的産(chǎn)品是面向所有(yǒu)人還是有(yǒu)精(jīng)确地指明受衆群體(tǐ)？明确指明你的産(chǎn)品或者服務(wù)的受衆群是明智的。通過不斷了解目标客戶的需求及标準，你能(néng)獲得更多(duō)與客戶交流的機會，并且讓客戶覺得享受了産(chǎn)品的專屬服務(wù)。這種策略的風險是你可(kě)能(néng)精(jīng)簡了自身，并縮小(xiǎo)了潛在客戶的範圍。然而，透明建立信任，你可(kě)能(néng)因此獲得客戶更多(duō)的信任。嘗試寫明産(chǎn)品使用(yòng)人群而不是所有(yǒu)人　　10. 嘗試直截了當而不是猶豫不決　　你可(kě)以用(yòng)不确定的帶着顫抖的聲音傳達你的信息，也可(kě)以滿懷自信地說出來。如果你經常用(yòng)類似“也許”、“可(kě)能(néng)”、“感興趣？”、“想要嗎？”這樣的疑問語氣來結束信息的傳達，或許你可(kě)以嘗試用(yòng)更權威的語氣來表達。誰知道呢(ne)，或許更為(wèi)舒緩的措辭來告訴用(yòng)戶接下來改怎麽做也可(kě)以給用(yòng)戶留下更多(duō)思考的餘地。嘗試直截了當而不是猶豫不決　　11. 嘗試用(yòng)鮮明的對比代替相似性　　将你的行動口号與周圍的元素區(qū)分(fēn)開來，使其更顯眼一點，能(néng)讓你的UI表達更強烈。你能(néng)輕易地通過多(duō)種方式讓你的主旨口号更醒目。你能(néng)采用(yòng)明暗色調的對比來凸顯。你還能(néng)采用(yòng)投影和漸變來實現層次上的對比。最後，你還可(kě)以從色輪上選取互補色（例如：黃色和紫色）來進一步提高對比度。綜上所述，你應該考慮将你的行動口号與頁(yè)面上其它元素明顯區(qū)分(fēn)開來。嘗試用(yòng)鮮明的對比代替相似性　　12. 嘗試指明原産(chǎn)地　　指明你的原産(chǎn)地，你的産(chǎn)品或者服務(wù)從哪裏來的，可(kě)以将你與客戶的關系拉得更近。具(jù)體(tǐ)提到産(chǎn)品的原産(chǎn)地的國(guó)家、州或者城市，就像人與人溝通時自我介紹一樣。如果你在産(chǎn)品介紹時做到這點，你的界面顯得更友好。通常，說明你的産(chǎn)品的産(chǎn)地也能(néng)讓客戶感覺産(chǎn)品的質(zhì)量更有(yǒu)保證。這是一種雙赢的方法。嘗試指明原産(chǎn)地　　13. 嘗試精(jīng)簡表單　　人類天生就抗拒密集型勞動，并且這也體(tǐ)現在表單填寫上。你要求用(yòng)戶填寫的每一個字段都有(yǒu)讓用(yòng)戶轉身放棄的風險。每個人打字的速度都是不一樣的，況且在移動設備端輸入更是一件苦差事。确定是否每一個字段都是必需的，盡量删掉不必要的字段。如果你确實有(yǒu)大量的信息需要用(yòng)戶填寫，考慮将它們分(fēn)開到不同的頁(yè)面填寫，或者在提交之後還能(néng)繼續補充。過多(duō)的字段會讓你的表單臃腫，要想精(jīng)簡也很(hěn)容易，減少字段就行了。嘗試精(jīng)簡表單　　14. 嘗試暴露選項而不是隐藏它們　　你使用(yòng)的每一個下拉菜單隐藏的信息，都需要用(yòng)戶用(yòng)額外的操作(zuò)才能(néng)顯示。假如那些隐藏選項對用(yòng)戶來說是貫穿整個操作(zuò)的，你可(kě)能(néng)會希望它們展示得更明顯一些。保留那些約定俗成的下拉菜單，比如說日期和時間（例如：日曆）或者地理(lǐ)位置的選擇。有(yǒu)時候下拉菜單在用(yòng)戶重複使用(yòng)的地方也是可(kě)以使用(yòng)的（例如：操作(zuò)菜單）。在你需要進行頁(yè)面跳轉的地方，盡量避免為(wèi)主要功能(néng)使用(yòng)下拉菜單。嘗試暴露選項而不是隐藏它們　　15. 嘗試分(fēn)模塊有(yǒu)條理(lǐ)地叙述而不是長(cháng)篇大論的平鋪直叙　　長(cháng)篇大論的平鋪直叙是很(hěn)容易失去客戶的。是的，很(hěn)長(cháng)的滾動頁(yè)面是很(hěn)帥，但是要小(xiǎo)心給客戶這樣一種感覺——在頁(yè)面還沒有(yǒu)結束的時候誤以為(wèi)内容已經結束。假如你的頁(yè)面需要滾動，嘗試設置一個可(kě)見的标識，讓用(yòng)戶遵循這個規律看下去。其次，内容間的間隙也不能(néng)過大（當然我指的是一個區(qū)間範圍，況且有(yǒu)這麽多(duō)的設備尺寸）。嘗試分(fēn)模塊有(yǒu)條理(lǐ)地叙述而不是長(cháng)篇大論的平鋪直叙　　16. 嘗試保持焦點而不是濫用(yòng)鏈接　　為(wèi)了盡可(kě)能(néng)滿足更多(duō)客戶的需求，很(hěn)容易在一個頁(yè)面上創建得到處都是鏈接。如果我們的重點是長(cháng)文(wén)本底部那個行動口号的話，那就得三思了。其它任何鏈接都有(yǒu)可(kě)能(néng)使用(yòng)戶離開頁(yè)面。注意你頁(yè)面上鏈接的數量，盡可(kě)能(néng)平衡導航頁(yè)面上的風格（更少的鏈接以及更高的轉化率）。删除無關的鏈接更有(yǒu)可(kě)能(néng)讓用(yòng)戶點擊那個最重要按鈕。嘗試保持焦點而不是濫用(yòng)鏈接　　17. 嘗試顯示進度狀态　　在用(yòng)戶界面上我們經常顯示有(yǒu)不同狀态的元素。郵件有(yǒu)已讀、未讀狀态，發票有(yǒu)已付、未付的狀态，等等。通知用(yòng)戶每一條記錄的特殊狀态，是提供信息反饋的好方法。界面狀态能(néng)幫助用(yòng)戶很(hěn)好地理(lǐ)解他(tā)們之前的操作(zuò)是否成功執行，以及接下來的操作(zuò)怎麽處理(lǐ)。嘗試顯示進度狀态　　18. 顯示對用(yòng)戶有(yǒu)利的按鈕信息，而不是讓用(yòng)戶覺得自己隻是在完成任務(wù)　　試想一下界面上有(yǒu)兩個簡單的按鈕。一個按鈕告訴你它将會“為(wèi)你省錢”，而另一個要求你“立即注冊”。我敢打賭，第一個按鈕被點擊的幾率更大，因為(wèi)注冊沒有(yǒu)自己内在的價值。而且，注冊讓人想到填不完的表單，過程特别費勁。假設表明，讓用(yòng)戶感到有(yǒu)利可(kě)圖的按鈕更有(yǒu)可(kě)能(néng)被點擊。另外，将好處寫在操作(zuò)按鈕附近可(kě)以提醒用(yòng)戶這樣操作(zuò)的原因。當然，現在仍有(yǒu)為(wèi)基于任務(wù)的操作(zuò)按鈕保留的空間，不過，這是預留給那些轉化率不高但使用(yòng)率很(hěn)高的操作(zuò)元素。網頁(yè)設計　　19. 嘗試直接操作(zuò)而不是無上下文(wén)的菜單　　有(yǒu)時候，直接在元素上進行操作(zuò)比無相關的菜單羅列要更有(yǒu)用(yòng)。舉個例子來說，當展示數據列表的時候，我們通常允許用(yòng)戶在列表的項上進行相關的操作(zuò)。在列表項上點擊，或者是鼠标滑過都能(néng)被用(yòng)來表達一種特定的操作(zuò)（删除，重命名(míng)，等等）。直接操作(zuò)的另一個例子是點擊一個數據項（例如說一串文(wén)本地址）後，然後文(wén)本框變成可(kě)編輯的狀态。使用(yòng)這樣的交互，減少了一些不必要的步驟。不過對于一些一般性的操作(zuò)（比如說前進、後退），使用(yòng)無上下文(wén)的菜單是沒有(yǒu)錯的。網頁(yè)設計　　20. 盡量顯示全部内容而不是創建額外的頁(yè)面　　當創建登錄頁(yè)面時，在轉換頁(yè)面上顯示全部表單字段會更好。與單獨創建額外的注冊頁(yè)相比，将注冊表單與登錄頁(yè)合并有(yǒu)更多(duō)的好處。首先，我們減少了流程操作(zuò)中(zhōng)的額外步驟，這樣操作(zuò)将花(huā)費更少的時間。其次，通過顯示表單字段的數量，我們也向客戶展示了注冊表單的實際長(cháng)度。當然，前提是我們的表單比較短（當然表單也應該盡量簡短）。

交互網頁(yè)設計技(jì )巧,創造好的用(yòng)戶體(tǐ)驗