[ UI ] 穿戴式技術對介面設計帶來的影響

SmartWatch 僅僅只是個開始，隨著問世的 Android Wear、Google Class、和未來的 Apple iWatch ，世界正慢慢的開始轉變成“穿戴”舒服的科技產品，取代“攜帶”。 以後「帶著一台電腦坐在咖啡廳的現象」漸漸的會轉移成用戶與互聯網的交互設計 到底什麼是可穿戴技術？ 可穿戴技術可以是衣服、或是配飾，目前大多穿戴技術設計帶於手腕或眼鏡的形狀，輕量。已健身工具為例，目前普遍使用和方便的可穿戴技術 Fitbit 、 smartwatches 和 pebble。 大家熟知的 Google Class ，雖然現在的成本讓大多人望之卻步，但就如一般科技產品，最終激烈的市場將會推動價格合理的成本，而當這時代來臨時，你將要準備好面對一切。 為什麼網頁設計師需要關注可穿戴式產品？ 83% 專家認為可穿戴技術會在未來的 10 年大幅度成長，到 2025 年將會完全沈浸在物聯網( IOT ) 。這意味著用戶將來自不同平台觀看網站，而不僅僅只是筆電或其他移動式設備。 隨著穿戴式技術的擴大和更多用戶的接受度，更多使用者會希望他們訪問的網站有提供此技術功能，如果屆時你沒有準備這樣的技術，客戶將會另尋其他網站來滿足他們的需求。 雖然可穿戴式技術正處於起步階段，但他目前快速成長，所有的可穿戴技術基本功能都已到位，例如瀏覽、社交媒體、即時聊天、攝影鏡頭、視頻。可穿戴技術的未來，將包括創建一個美麗而實用的網站，讓使用者能夠有效的訪問他們所關心的訊息。 如何將穿戴技術結合你的網頁設計 之前“可移動裝置”挑戰了網頁設計的設計方向與思考邏輯，現在，毫無疑問的，可穿戴技術將會再次影響你的網頁設計，問題是該怎麼做？ 1.  響應式設計 響應式設計應該要被重視，統計到 2014 年，目前只有 3% 的網站是符合響應式設計且敏感又快速。 2. 訊息是即時的 及時的訊息是穿戴式技術的重點，這意味著如果你的網站無法提供此訊息，將會減低用戶的造訪率。為什麼訪問者要在你的網站？必須先搞清楚你的網站對使用者來說什麼訊息才是最重要的，其餘的元素就可以斟酌顯示或隱藏，讓網站思路變得更清楚。 3. 互動就是一切 一個網站不應該只是靜態，就像是一只漂亮的花瓶。 4. 極簡設計 極簡設計的趨勢已經存在一陣子了，期望這坡趨勢會走得更久，因為極簡設計比起其他設計更能被穿戴式科技產品所接受，因為界面不會被一些漂亮而無用的 icon 所淹沒。很多時候，網頁設計師對於作品過度風格化，希望讓使用者留下深刻的印象，但其實，最難的設計其實是創造一個安靜的設計，顯山露水，這才是一個成熟的設計師。 5. 文字越來越大 以前的網站字級越大，就會被歸類為“俗”那類，所以即使看到眼睛瞎掉，網間還是充斥著 12px 的文章，甚至是 10px  ⋯。行動裝置漸漸取代電腦，穿戴式技術的興起，小文字終於不再被使用者接受，也不再為主流。 6. 不要再有彈跳視窗了！ 無論彈跳視窗設計多麼漂亮，一直都不喜歡他出現在我的網頁中。但這可能會有一點爭議，無論如何，至少目前為止，穿戴式科技沒有足夠的空間供彈跳視窗出現的位置。 如果您的設計必須有一個彈跳視窗，那請設計一個巨大的關閉按鈕。 7. 網頁設計必須是直覺的 想想，為什麼會有訪客透過穿戴式技術連結到你的網站，無論是尋找資訊或是任何指示，甚至是優惠卷等等，無論是什麼需求，你的網站必須了解並引導使用快速找到他們想找的資訊。 所以直覺的網站設計無論在任何時候都是重要的，因為用戶沒有耐心...。 via http://webdesignledger.com/trends-2/how-wearable-technology-will-impact-web-design ...

Read More

Huzi 凌晨1:18  1 comment

[ UX ] “ OK 按鈕 ” 與 “ Cancel 按鈕 ” 擺放位置順序的微妙關係

當設計師設計對畫框畫面時，常常思考「確定」與「取消」按鈕的放置位置。根據他們的功能或使用者習慣，什麼是最好的？哪個又該放在前面？ 或 平台的一致性？ 許多人面對這個問題時，最常看見的解決辦法就是「 跟別人一樣就對了」，例如 windows 把 「確定按鈕」放置第一，我們就應該遵循這個原則。雖然這看起來像是一個解決問題的方法，但實際上它不是。設計師應該要去思考放置這兩個按鈕位置的背後原因和用戶體驗。 「一致性」是設計師常常說的話，也是一個受歡迎的藉口。但若不深思熟慮用戶所面臨的問題，一昧的追尋所謂的“設計法則”對用後又有什麼益處？如果設計師根本不知道某設計為何存在。又或者，某些“設計法則”其實是對用戶不友善的方式，但設計師只為了借助平台的「一致性」，以為就能解決所有的問題？ 其實平台設計的一致性不應該只是為了滿足設計師，一個真正的設計師是需要了解問題的根本或這更深的層次，並了解為什麼應該這樣設計。 為什麼「確定」按鈕放在畫面右側比較好 當設計師開始思考按鈕的放置位置， 可能會覺得唯一的辦法就是要讓用戶測試。如果是一個資歷較淺的設計師，還不太相信自己的判斷時，這可能會你唯一的方法；但如果是一個經驗豐富的設計師，他們可以從用戶的角度來看這項產品或頁面時，那麼就可以通過設計分析來解決這個問題。 從「使用者眼球流程」來判斷 有些設計師認為，把「確定」按鈕放置在左側對用戶是最好的，因為這樣就更接近使用者的眼球瀏覽順序，聽起來是有道理，但你不能忽略使用者習慣，使用者不會貿然決定點擊任何一個按鈕，當他們還沒看到所有的選擇之前。這意味著，大多數的用戶不會盲目地點擊他們眼球看到的第一個選項。  當「ok」按鈕放置在左側時： 使用者眼球必須看完所有可以選擇的按鈕，才會返回來點擊 當「ok」按鈕放置在右側時： 當使用者確認看完所有的按鈕，眼球也朝一個方向流動， 順著進行點擊的動作。 以上兩張圖明顯表示，下圖帶給用戶更快的視覺流程，用戶在每個按鈕上注視的次數只有一次，所以以速度或是用戶使用上的流程來說，「確定」按鈕放置於右側是好的。 從「按鈕功能」來判斷 按鈕功能？簡單來說就是當用戶點擊「確認」或「取消」按鈕時，他希望應用程式給他什麼 feedback？ 「確定」按鈕是當他們完成該頁 閱讀/填表 完後點擊的按鈕，並把它們推進到下一個頁面。「取消」按鈕是讓用戶回到原始狀態，回到上一個動作，例如清空所有已填寫的欄位。 這樣的判斷類似分頁按鈕的位置，以使用者到「下一個」的按鈕放至右側，而需要使用者返回到「前一頁」的按鈕位置放在左側。這樣也反射到使用者的閱讀和導覽方向，「右進、左退」，這樣直覺的思考也便於用戶理解。 為什麼按鈕不能分別放在 左下角 及 右下角 呢？ 是啊，就上面理解來說，那為什麼不能直接把「取消」「確定」按鈕各放置於左下角，這樣不是更能直覺思考導覽模式嗎？ OH~NO NO NO，因為「取消」「確定」按鈕不是完全屬於 “分頁”按鈕，所以就方向性嚴格的區分其實是不必要的，這樣反而弊大於利。 除了按鍵之間巨大的視覺分離使得操作變得困難之外，在功能上，使用者如果不能直接看到該程序有“撤回”的關鍵動作，反而會覺得不安。（就像 Ctrl+ Z 功能，在軟體操作上來說很重要一樣）。 所以讓使用者可以看到「取消」按鈕隨著「確定」按鈕放置在旁是很重要的，因為取消按鈕對於使用者來說，也是一個安全按鈕，以防有任何想要“撤回”的步驟，而且放置一起，也讓使用者能更高效率地去二選一中採取最佳的下一步行動。 為什麼按鈕要放在頁面的最右下角？ 放置於右下角是為了讓用戶更方便點擊，它遵循了 Gutenberg diagram (古騰堡圖表) 的瀏覽模式： 右下角的位置剛好是使用者瀏覽順序的最後一個區塊，把按鈕放在右下角的位置剛好可以讓用戶閱讀完文章後決定所要採取的行動按鈕，順勢進行點擊的動作。 結論 當真的了解為什麼“確認按鈕”要在畫面的右下角時，同樣的觀念就可以用在更多設計思考層面上。 當然，除了按鈕的位置很重要之外，要注意的還有按鈕視覺比重與文案撰寫。 via  http://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/ ...

Read More

Huzi 凌晨4:11  No comment

[ UX ] 為什麼使用者不會點擊首頁輪播圖片

Erik Runyon 網站研究首頁輪播圖片點擊率發現300萬的主頁訪問量僅約1%的人會點擊輪播圖片。下面的研究結果是從2013年01月01日 至 2013年6月30日，長期觀察五個網站的首頁輪播點擊效果： 網站 1： 首頁訪問量：3,755,297 點擊每個輪播位置的百分比： 第 1 張：89.1％ 第 2 張：3.1％ 第 3 張：2.4％ 第 4 張：2.8％ 第 5 張：2.6％ 網站 2： 首頁訪問量：37,688 點擊每個輪播位置的百分比： 第 1 張：71.07% 第 2 張：7.13% 第 3 張：6.71% 第 4 張：8.18% 第 5 張：6.92% 網站 3： 首頁訪問量：43,724 點擊每個輪播位置的百分比： 第 1 張：54.57% 第 2 張：17.87% 第 3 張：10.84% 第 4 張：8.75% 第 5 張：7.97% 網站 4： 首頁訪問量：8,210 點擊每個輪播位置的百分比： 第 1 張：62.1% 第 2 張：15.32% 第 3 張：12.1% 第 4 張：10.48% 網站 5： 首頁訪問量：26,900 點擊每個輪播位置的百分比： 第 1 張：84.81% 第 2 張：4.48% 第 3 張：10.71% 輪播圖片的點擊效果差到令人吃驚。 大多數的輪播區塊都有兩張以上的圖片，第一張圖片都嘗都得到最多的點擊，但第二張之後的點擊率都急劇下降，這樣的點擊效果通常問題都不是出現在圖片身上，而是輪播ux設計，例如輪播區塊的導航列。...

Read More

Huzi 凌晨12:30  1 comment

[ 設計好幫手 ] 推薦給設計師的 Photoshop 自動切圖軟體 Slicy（Layer Cake）

根據 想提升工作生產力，就別再做這七件事 一文中，提到一項是 停止作重複的事情，並使它自動化。 對於設計師來說，切板這件事常常會覺得浪費時間，但卻又不得不做好，這時找出一些有用的小工具，讓例行工作“切圖”這件事變得非常輕鬆，意外的還會讓你養成良好的工作習慣。 Slicy 官網：http://macrabbit.com/slicy App Store：https://itunes.apple.com/tw/app/slicy/id512533449?l=zh&mt=12 這項軟體操作簡單，唯一的必備條件是使用 Slicy 前需要一個架構乾淨清楚的 photoshop 結構與命名。 後續只要將 PSD 拖進去 Slicy 的 APP 視窗內，就能自動生成切圖元件，事後只要一變更 PSD 內容，切圖元件則會自動更新，省掉非常多的工作量，聽起來是不是很神奇～～ 當然，前提是必須先養好良好的PSD圖層管理習慣及命名。 命名規則 基本標簽 圖層或群組名稱的字尾打上.png 或 .jpg。 沒有打上副檔名的圖層資料夾則不會生成元件。 設定切圖尺寸 有時製作APP時，照文件規則會需要固定的尺寸，例如 64 x 64, 48 x 48, 24 x 24.。 方法有兩種： 將欲呈現的尺寸，使用形狀圖層畫出，命名為 @bounds 。生成圖片時，系統不會生成@bounds圖片。（如圖 red.png） 在資料夾上使用向量遮色片 （如圖 yellow.png） ps. 若在圖層上使用向量遮色片則會出面錯誤 （如圖 green.png） 製作 Mac Icon  方法： 只要把副檔名改成.icns 製作兩倍尺寸或1/2尺寸的圖層 方法（寫法）： 1. 放大2倍：圖檔名稱@2x.png 2. 縮小1/2倍：圖檔名稱.png+@2x ps . 記得做向量圖檔，不然放大會糊掉哦 另外這裡有一個貼心的小功能，原PSD檔的星星尺寸為基數（85x81)，Slicy 會自動把尺寸各加上1px的空白，讓數字變成偶數時，再放大or縮小。 最後，最厲害的就是當你按上方的  save 存檔時，Slicy 會詢問是否要自動更新元件，這時候選擇右邊 Automatically，當你事後更改PSD時，就不用每次修改一次 PSD 還當個傻子慢慢存檔了！ 是不是方便極了～～～～～～～～！ 官網可以先下載試用哦  http://macrabbit.com/slicy/ ...

Read More

Huzi 清晨7:40  No comment

HTML5 sectioning 元素, 標題 及文件大綱（Outline ）

開發 HTML5 網站時，有時只注重視覺的呈現或寫 code 的技巧，而忘了 HTML5 很重要的 Outline (大綱)。 Outline 是什麼？ 以 yahoo 為例，Outline 為右邊的形式 為什麼開發網頁時要注重 Outline 呢？ 除了讓瀏覽器快速解析網頁的主要架構，有助於 SEO 之外，讀取的速度還可以加快，所以開發 HTNL5 網頁時，了解並製作正確的 Outline 為首要且重要的一個課題。 如何得到解某網站的 Outliner ？ 實用的小工具網站（HTML 5 Outliner）http://gsnedders.html5.org/outliner/ 如何編寫正確的Outline？（以下正文開始） Sectioning 使用新的 sectioning 元素時（article,section,nav,aside），更需要小心 outline 的結構算法 為了方便理解，先看html4的結構 uThe HTML 4.01 outline <body>     <header>Site title etc.</header>     <nav>         <ul>             <li><a href="/">Nav item</a></li>         </ul>     </nav>     <article id="main">         <h1>Article title</h1>         <p>Article content.</p>        ...

Read More

Huzi 凌晨2:05  No comment

Mac & Window 打造 Sass + Compass 環境（ 建立 Compass 專案）

Step1 : Ruby 環境 因為 Sass 是由 Ruby 程式語言寫成，所以必須從 Ruby 環境下安裝 Mac： 由於已經安裝好了Ruby，所以只要直接開啟終端機 Terminal 輸入 $ gem update --system" //先更新 gem $ gem install compass" // 安裝 Compass 由於用 SASS 的都會搭配 Compass 使用，所以可以直接裝 Compass，電腦會自動安裝 Sass 如果出現錯誤訊息 : ERROR:  While executing gem ... (Gem::FilePermissionError) 則改輸入： $ sudo gem update --system" 用意為提高執行權限，此時會要求輸入電腦管理者密碼。 Window： Windows 必須先安裝 Ruby，請至 RubyInstaller 下載安裝程式，跟著軟體指令安裝完成後，開啟 Ruby 的命令提示字元（以管理員的權限開啟），執行以下指令確定是否有安裝成功： ruby -v 顯示結果會出現 Ruby 的版本，那就說明你成功了。 接下來可以下與 Mac 相同指令，先更新 gem 再安裝 Compass 。 $ gem update --system" //先更新 gem $ gem install compass //安裝 Compass 由於用 SASS 的都會搭配 Compass 使用，所以這直接裝 Compass，電腦會自動安裝 Sass Step2 : 建立 Compass...

Read More

Huzi 清晨7:22  No comment

Sublime Text 3 安裝設定

Sublime Text 3 的好處就不多加介紹，這裡主要簡單說明設定，順便幫自己做一下筆記。 先到官網下載 Sublime Text 3 每個編輯器都有很多好用的 plugin ，當然 Sublime 也不例外，首先先安裝 Package Control，之後許多好用的套件就從此下載。 1. 安裝 Package Control ： Ctrl + `   組合鍵開啟，直接複製以下安裝程式碼到命令列中，並直接按下 Enter 及安裝完畢： import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) 注意：此段成式碼只適用於 Sublime Text 3 。Sublime Text 2 程式碼看這。 安裝完畢後再按一次 Ctrl + `  關閉控制台視窗，或直接重開 Sublime Text 3 。 2....

Read More

Huzi 凌晨2:10  No comment