跳到主要內容

發表文章

目前顯示的是 1月, 2014的文章

選擇輸入項的提示選項設計方式

這篇來提一個設計上的易用性的小技巧,來自前幾天看到的討論 常見到一個需求是,你會想在選項裡增加提示字眼(例如:請選取選項),但又不是真的想讓使用者選取它 這算是在小地方對使用者更貼心的技巧,那麼要如何達成呢? 先從傳統的透過HTML找看看有沒有方法可以達成,印象中optgroup這個tag似乎有可能? 選項1 code: <select name="demo">     <optgroup label='請輸入選項'>         <option value="1">選項1</option>     </optgroup> </select> 雖然的確有可以提示的部分,但是否符合需求就見仁見智了 第二種方式是透過selected屬性與disabled屬性並用 請輸入選項 選項1 code: <select name="demo">     <option selected disabled>請輸入選項</option>     <option value="1">選項1</option> </select> 選項的預設值透過selected屬性解決,而disabled屬性則會在進行選取時發揮作用 看起來是不錯的方法,只是我在後面有看到一個我更喜歡的方式 第三種方式是透過CSS輔助 請輸入選項 選項1 code: <select name="demo">     <option selected style="display: none;">請輸入選項</option>     <option value="1">選項1</option> </select> display: none;會在選取時發揮作用,讓選單裡乾脆不出現這個選項 目前就看到這幾種方式,設計時可以考慮使用來增加易用性

Even Faster Web Site 讀後

這本書寫的時間點比較早 而最近幾年的browser和網路建設更是日新月異 有些內容可能已經不大適用,不過裡面的多數準則依然可以遵守 一部分的內容在blog其它文章提過了,就不寫在這裡了 追求效率的重點之一便是提高檔案的下載、重繪(render)等處理的效率 很多技巧都是為了追求這個要點而發展出來的