前言
這次全是文字乾貨沒有大圖還請耐心的觀看
近期用空餘時間總結了幾個小的功能點，也是自己體會到的功能點分享出來後續還會有更多文章內容敬請期待.......
希望能夠給與一些剛入行不久的設計師總結的幾個經驗分享給你們，如果有那麼群人為你帶路會少走很多的彎路和探索的時間，設計這條路也許就是這樣通過不同的探索與前行帶給你不一樣的收穫，也許這只是精神層面上的一些東西，但是生活太過於骨感不得不考慮這些因素在內，以前是因為喜歡而喜歡，現在是為了生活而喜歡，也許這種喜歡堅持不了多久但願能給予剛入門一兩年的人一些分享一些也是極好的......
1、按鈕的Hove效果交互
2、麵包屑導航的使用方式與場景
3、為什麼用戶不點擊你的主頁Banner切換按鈕
4、輸入框標籤的使用
5、實線的的輸入框與塊面輸入框的區別
6、停止對已知用戶輸入使用選擇菜單
1、按鈕的Hove效果交互
移動按鈕的“Hover效應”
一個典型的界面屏幕上有許多元素。
懸停效果通過提供按鈕上的視覺反饋通知用戶可以交互什麼。
但是有一個問題--懸停效應是針對桌面應用程序的，而不是移動應用程序。
移動設備上沒有鼠標設備，因此用戶沒有使用懸停效果的奢侈。
在移動應用程序上使用懸停效果會導致按鈕在點擊時停留在懸停狀態。
這種粘性不僅使用戶感到困惑，而且當用戶被迫按雙擊按鈕啟動操作時，用戶會感到沮喪。
下載按鈕
僅僅消除粘性懸停效果是不夠的，移動用戶需要視覺反饋，因為誤按鈕是個常見的問題。
移動按鈕的目標尺寸比桌面按鈕要小，而且很難點擊。
不僅如此，有時他們的手指會以不同的表面壓力擊中目標，而這些壓力並不總是能觸發動作。
移動按鈕的懸停效果是紋波效應，一個漣漪效應提供了用戶點擊按鈕時所需的視覺反饋。
用戶在按鈕上看到一個紋章動畫，確保他們的手指準確擊中目標。
如果他們沒有看到漣漪效應，他們知道他們錯了按鈕。
視覺反饋會讓他們立即確認一個準確的點擊，這樣他們就不會在等待的時候感到奇怪，如果他們點擊了為什麼沒有反應。
漣漪效果動畫
GIF動畫
2.什麼時候應該使用麵包屑導航
如果你曾經迷失在一個廣闊的領域，你首先想知道的是你在哪裡。
一旦你知道你能知道你離目的地有多遠，這就是為什麼商場提供路標地圖“你在這裡”的原因。
用戶想知道當他們在一個網站的導航中迷失的時候，他們在哪裡，知道他們在哪裡會告訴他們該去哪裡。
你應該以麵包屑導航的形式提供給他們一張尋路地圖，這將給他們一個“你在這裡”的指標，在網站的層次。
三級以上
所有網站都按照層次結構組織其內容，有些是膚淺的，有些則是深的，這取決於內容的數量。
如果層次結構包含三個或更多級別，則應該使用麵包屑導航。
什麼時候使用麵包屑導航
一個只有兩個級別的站點不需要麵包屑，這是因為用戶正在從主頁導航到下一個層次，這是很淺的，不太容易迷路。
但是當你有三個等級時，用戶更容易迷路，用戶將來回導航從主到子類別很多，對於他們來說，很容易混淆他們是在主頁面上還是在子類別頁面上。
主頁是第一級
所有麵包屑都需要從主頁開始，主頁是第一級，因為它幾乎總是用戶的起點，它給了他們一個參考點來衡量他們在現場有多深。
首先顯示主頁有助於用戶識別層次結構。
主頁圖標
沒有必要在主頁鏈接中使用“home”這個詞，您可以使用家庭圖標或小網站標誌代替，這使得基準面更加清晰，更易於識別。
這就像電梯如何使用星圖標和字母“B”來區分建築物的地面層或地下層。
使用箭頭，而不是分割
所有麵包屑都需要從主頁開始，主頁是第一級，因為它幾乎總是用戶的起點。它給了他們一個參考點來衡量他們在現場有多深。
首先顯示主頁有助於用戶識別層次結構。
麵包屑導航設計方式
不要鏈接到用戶所在的頁面
最後一個麵包屑級別是用戶所在的頁面，讓它成為文字標籤，而不是鏈接，如果你讓它成為一個鏈接，當用戶點擊它時，你會感到困惑，他們最終會在同一頁上想知道是什麼改變了，使用文本標籤明確用戶的位置。
區分用戶所在的位置
用戶所在頁面的文本標籤應該與前面的鏈接不同，這使得用戶可以通過外觀識別他們的位置，要做到這一點，一種方法是粗體的文本標籤，並使它比鏈接更深或不同的顏色。
麵包屑導航設計方式
麵包屑的好處
麵包屑不是一個選項，但如果您的站點有3個或更多類別級別的內容，則必須這樣做，有利而無弊用麵包屑。
當用戶導航時，他們想知道他們相對於其他站點的位置。不知道會讓他們迷失方向，浪費時間。
為了讓他們更容易找到目的地，留下了麵包屑的痕跡。
3.為什麼用戶不點擊你的主頁Banner切換按鈕(旋轉木馬形式)
主頁上的一個大的圖形元素怎麼能得到如此少的點擊呢？大多數都令人做得不好的原因可能會讓你大吃一驚。
大多數傳送帶都有多張幻燈片，當用戶單擊導航箭頭時會旋轉，第一張幻燈片的點擊次數總是最多的，但此後每一次下滑的點擊率都將大幅下降，低點擊率的問題不是旋轉木馬模式本身，而是旋轉木馬導航。
Banner按鈕切換方式
旋轉木馬上的導航箭頭不鼓勵用戶單擊，它失敗是因為一支箭提供了並不描述用戶單擊它所獲得的信息，最後，他們忽視了這一點，把注意力放在了其他信息更豐富的東西上。
一個箭頭只能告訴他們還有更多的幻燈片，這還不夠重要，不能點擊。因此，他們從未在旋轉木馬中看到其他幻燈片，不僅如此，用戶經常會錯過導航箭頭，因為它們太小了，並且放置在旋轉木馬的邊緣附近，有了這個設計，難怪其他幻燈片永
遠不會被點擊。
相反，在旋轉木馬上需要的是一個清晰、可見的標籤導航。標籤是信息豐富，有意義，並描述用戶想要什麼。
給每一張幻燈片貼上標籤會激勵他們點擊，因為標籤告訴他們會得到什麼。
用戶更有可能點擊對他們來說信息豐富的東西，標籤導航也更大，並放置在一個比導航箭頭更可見的位置。
它不僅更容易看到，而且用戶知道當他們看到它時會期待什麼。
大多數人會看這個網站的研究結果，認為所有的傳送帶都是壞的，你不應該使用它們，但事實是，大多數旋轉木馬都是壞的，因為它們使用箭頭形式。
箭頭提供的不是信息密集，而是文本標籤，如果希望更多用戶單擊旋轉木馬幻燈片，請使用標籤導航。使您的標籤描述性和有意義，您將得到更多的用戶點擊您的其他幻燈片。
4、輸入框標籤的使用
有源場狀態
首先，浮動標籤上存在動畫問題。當用戶選擇文本字段時，標籤將從占位符位置過渡到帶有動畫的頂部對齊位置。雖然這種對活動狀態的影響看起來很酷，但它給具有運動敏感性的用戶帶來了一個問題。
如果浮動動畫只發生在幾個字段(短格式)上，那麼它就不會造成問題，但是，當它連續出現在許多領域(長形式)上時，這種影響會對運動敏感的用戶造成複合並引發不愉快的反應。
非必要的動畫會引起視覺混亂反應，如分心、頭暈、頭痛和噁心，首先我們面對的群體並不是設計師或者是專業的腳本製作師而是不懂設計的用戶，不懂體驗的用戶，當習慣稱為習慣就是用戶習慣。
對於非殘障用戶來說，這會在他們的任務中造成分散注意力的問題，很難預測標籤在第一次遇到字段時是否會浮動，當它浮動時，一些用戶可能會被這種行為嚇到，他們甚至可以玩它，這需要時間來完成他們的任務。
越簡單越實用減少用戶思考時間才是關鍵
使用內置的頂部對齊標籤，沒有令用戶驚訝的不可預測的動畫。你看到的就是你得到的。
這種靜態方法可能不那麼花哨，但不需要幻想，因為它對用戶幾乎沒有好處。
效果展示
它不使用動畫來指示活動狀態，而是用彩色色調突出顯示標籤和邊框，為增強對比度，邊框也從1像素增加到2像素，任何額外的功能只會分散用戶填寫表單的注意力。
內容的可讀性
使用內置的頂部對齊標籤，沒有令用戶驚訝的不可預測的動畫。你看到的就是你得到的。
這種靜態方法可能不那麼花哨，但不需要幻想，因為它對用戶幾乎沒有好處。
效果展示
浮動標籤：微型文本標籤
當浮動標籤從占位符轉換到對齊位置時，文本標籤通常會縮小，變得很小。
這是浮動標籤的標準行為，因為標籤在活動字段選擇後不會被處理。
當用戶需要檢查或更正輸入時，標籤的微小大小會使文本難以閱讀。
低視力用戶在閱讀這些微小的文字標籤時最費勁。
固定標籤內容：自始至終可讀性
在字段激活時，內字段頂部對齊的標籤不會收縮。它們
保持與開始時相同的可讀性大小。
在主動字段選擇之前和之後，標籤都被處理得很重要。
通過不操作文本大小，可讀性保持一致，不會有任何突
然的驚喜來迷惑用戶。
佔位符提示
浮動標籤：無內容提示
當用戶不確定正確的輸入時，信息提示可以幫助他們解決問題。
浮動標籤不會留下太多提示空間，因為標籤佔據佔位符空間。
相反，提示文本必須位於字段之外，用戶可以很容易地忽略它。
不僅如此，還有多個提示會使表單混亂。
額外的文本將與標籤和輸入文本發生衝突，使用戶更難集中註意力。
固定標籤內容：有提示內容
任何需要提示的字段都在內字段頂部對齊的標籤上有佔位符空間。
提示放在一個位置，用戶可以很容易地看到它們。
它們可以同時讀取帶有提示的標籤，以便進行更快的處理。
提示文本也不會與輸入文本發生衝突，因為它會在用戶輸入字段後消失。
區別輸入和標籤
字段內容居中無空間感
浮動標籤往往使輸入和標籤難以區分，因為它們之間缺少空白空間標籤和輸入擠得太緊了，它們往往一起運行。用戶沒有將其作為兩行不同的文本來閱讀，而是將其看作是一小塊文本。
之所以會發生這種情況，是因為初始的標號和輸入都是給定的素數間距，並且在字段中垂直地居中。當標籤在字段選擇上浮動到頂部時，它就成為一種事後考慮，無法得到所需的間距。當標籤浮起來時，人們並沒有註意到它的外觀。
保持字段的空間性和呼吸性
內字段頂部對齊的標籤要求您從一開始就對這兩種文本給予同等的關注，而不是將標籤塞進輸入。當你設計時，你必須考慮標籤和輸入是如何結合在一起的。這使你有足夠的空間來容納他們兩個，而不是一個比另一個，使用合適的間距當用戶檢查表單時，更容易區分輸入和標籤。
5、下劃線的輸入框與實線輸入框的區別
多年來，文本字段在風格上已經發生了變化，設計師們的創意越來越強，但有時也有點太有創意了，吸引許多人注意的一種特殊樣式是帶下劃
線的文本字段，它新穎而簡約的外觀可能會吸引你使用它，但當你了解它是如何影響用戶行為時，你會重新思考。
帶下劃線的文本字段很難讓用戶識別和挖掘，如果他們在識別和挖掘你的字段時有困難，他們將無法啟動你的表格，也無法完成它，這些問題導致用戶沮喪、放棄表單和降低轉換率。
並不是每個用戶都對帶下劃線的文本字段有問題。精通技術和有著正常視野的用戶通常都能找到內容，但許多老年人和視力受損的用戶卻很難找到內容。他們通常會出現在表單上，並想知道文本字段在哪裡開始他們的任務，當他們在頁面上看到的都是文本標題和內容分隔符時，他們會感到困惑這是不是輸入框？ ？ ？還是這是文字內容給我看的？ ？ ？還是說出錯了？ ？ ？在這裡我要說明一點的是，並不是所有用戶都是你和都是設計師，中國用戶難道只有2-3千萬設計師只是你的用戶？而不是那10幾億的用戶？所有設計師不要過於執著
下劃線是文本字段還是內容分區
用戶還可能將其誤認為是內容列表,當他們登陸表單時，內容列表並不是他們所期望看到的，這會讓他們覺得自己出現在錯誤的頁面上而離開了。
不僅如此，還有下劃線的文本字段也很難點擊，因為內容目標的邊緣丟失了。
當頂部和側面邊框是開放和不可見的時候，目標就變成了一條薄而微弱的單像素線。一個較小和較少可見的目標，目的是降低用戶的點擊精度，
並導致誤判。
在某些情況下，當它們瞄準目標時，可能會意外觸發相鄰的文本字段。沒有明確的目標邊界，手指很容易降落在錯誤的區域。
可動外觀
文本字段應該顯示為可輸入，這樣用戶就可以立即啟動表單，並更快地點擊每個字段。與其開放邊界，不如保持邊界四面封閉。
這樣做會使您的文本字段看起來像具有更大目標的可訪問對象。
它也有利於繞過您的文本字段的角落，以增強它的可輸入外觀。
人類與生俱來地認為圓形的、輪廓的物體是友好的，銳利的，有角度的物體是具有威脅性的。
這一發現表明，用戶對圓角有積極的傾向，這吸引他們與這些對象進行交互。
其實文本字段還是禁用元素
除了可訪問的外觀外，您的文本字段應該看起來是可填充的，而不是填充的，許多設計師犯了一個錯誤，就是在裡面填充一層灰色，與帶下劃線的字段相比，固體文本字段是一種改進，但它們仍然不是最佳的效果。
固態灰色填充使文本字段看起來像是處於禁用或非活動狀態，它使用戶懷疑他們是否應該與他們互動，在啟動表單之前，發送這些混合信號會使它們混淆。
當文本字段看起來像禁用的元素時，用戶就不太可能立即與它們交互，他們將首先掃描頁面中的常規文本字段，當他們意識到這些是唯一類似文本字段的元素時，他們可能會與它們交互，這種認知上的努力使他們的完成時間變慢。
最重要的是，堅實的文本字段使輸入和占位符文本更難閱讀，當灰色背景上有灰色文本時，顏色對比度不強，許多低視力用戶將有一個困難的時間閱讀文本，並可能放棄形式作為一個結果。
6、停止對已知用戶輸入使用選擇菜單
在決定使用選擇菜單一個領域問自己一個問題，用戶會不看選項列表就知道他們的輸入嗎？如果答案是“是”，則不要使用“選擇”菜單，相反，使用自動完成字段。
如果用戶已經知道了他們的輸入，就沒有必要掃描和滾動一長串選項，選擇菜單會迫使用戶做這個額外的工作，這會讓他們感到沮喪，使他們慢下來，更糟糕的是，在手機上，只有一小部分列表是可見的，鍵盤搜索是不可用的。
自動完成字段更好，因為它可以節省用戶在選擇已知輸入時的時間和精力，用戶只需鍵入輸入的前幾個字符，就可以將輸入顯示為選項，然後，他們可以按下箭頭鍵並從菜單中選擇它。
相反，他們從大量的選項中選擇，而是從最小數量的選項中選擇，他們輸入的越多，出現的選項就越少，這樣就可以更快地找到和選擇他們的選項，顯示給用戶的選項數量減少，這也降低了錯誤率。
通過使用自動完成字段，而不是為已知的輸入選擇菜單，使用戶可以快速、輕鬆地填寫表單，就像去一家熟悉的餐館，如果你已經知道你想點什麼食物，看菜單就是浪費時間。
<!--
-->
