10 月, 2017 | 網路

2017-10-16

UI 設計小技巧 – 電話號碼欄位

Post By admin 網路資訊

相信大家都有在介面中被要求填入電話號碼的經驗吧！是不是有時會發生格式難以理解而輸入易錯亂？亦或修改困難 … 等體驗不佳的情境？此時可能還因無法順利完成簡單的任務而責怪自己！其實這些在設計上都能被優化，只要設計師與工程師能多點同理心，考量上更加周延，這些情況絕對能避免的。而在這篇文章中，大舌頭將與大家分享「表單（form）UI」中關於「電話欄位」的設計細節。

在我們討論設計的小技巧前，先來看看一些惡搞的輸入方式。在大笑之餘，其實大舌頭是要強調不良的設計，到底會帶給使用者多大的麻煩？

基本電話號碼格式介紹

如果是國內的服務，通常不會要求區碼（如高雄是 07）與電話號碼分開填寫，假使需要分開填寫，使用者也不太會搞混；但如果是需要填入國際電話號碼形式，情況就複雜許多，很多人也會搞不清楚。

常見的輸入格式如下（非撥打）：

國碼＋區域號碼（有些要去零）＋市話
ex：+886 7 123 4567
國碼＋手機號碼（有些要去零）
ex：+886 910 123456

另外，補充一點小知識，在台灣區碼分為 2 碼或 3 碼，後面的電話號碼分別為 8 碼與 7 碼。例如：(035) 是大新竹地區、(07) 是大高雄地區。

輸入欄位的樣式

基本上，電話欄位輸入樣式分為單欄與多欄式，以下簡單描述其操作方式與優缺點：

單欄設計

最普遍的電話號碼輸入樣式即單欄式，也就是在前面放置一說明文字（或有 icon 輔助），後方放置一欄位，讓使用者填寫。這樣的方式相較於多欄位，它能避免使用者在跳格輸入時點擊欄位的動作，以及較少的程式碼，但也會造成一些問題或不便，例如：當電話號碼過多時，使用者不易閱讀，或是使用者不知道該如何提供號碼格式 … 等（需不需要加國碼、區碼？）。

網動廣告科技

參考資料：https://www.mydesy.com/ui-design-2

UI 設計小技巧 – 電話號碼欄位

2017-10-16

那些真正影響使用者體驗的網頁效能數據指標 – GOOGLE I/O 2017

Post By admin 網路資訊

網頁設計　網站設計　台北網頁設計

在 Google I/O 2017 中我認為有一場談論網頁效能數據與使用者體驗的演講很值得分享：Web Performance: Leveraging the Metrics that Most Affect User Experience，雖然內容圍繞在網頁技術架構的建議上，可能會讓不懂程式技術的人卻步，但身為 UX 從業人員，數據分析是一個非常重要的技能，可以幫助我們建立衡量的基準、理解產品的表現，這場演講內容是將使用者的感受對應於網站速度效能需要被衡量的指標，是 UX 工作者非常需要的知識。

首先，講者希望透過同理使用者的感受，幫助我們思考並提問：哪些數據應該被檢視，並且成為使用者體驗的衡量資料之一。一般來說，最常見的是透過網站流量分析工具來記錄使用者在自家網站上的行為；不過，對網頁的程式開發以及研究網站使用體驗的人員來說，講者建議將網頁資訊下載的過程，分別記錄不同階段的載入完成時間，這些數據指標會更有助於了解網頁效能提升之後對使用者的幫助是什麼。講者也特別分析了 mobile web 與 mobile web app 類型的產品，也提供了目前 Google 公司的測試支援工具。

網頁效能就是速度
一開始，我們必須要先了解「效能」對使用者來說的意義是什麼？是「速度感」，因為現今的使用者對於網頁內容下載的感受非常沒耐心敏銳，無論他們是在使用 app 或是在瀏覽器中尋找資訊，追求的目標就是過程中不被干擾、內容呈現快、系統操作反應快等，一旦下載速度過久，就會產生效能差的印象。但是講者認為「效能」本身其實很難被定義如何叫做「快」，以下載快慢來說，網頁內容的下載時間，其實不是一個單獨的時間點可以代表，而是由許多事件運作綜合起來的時間區間，然後再將不同狀況的下載速度平均起來而得。我們如果可以對這些背後運作的架構多一點理解，就能用這樣的思維來衡量「效能」。

平均下載速度的迷思，讓人忽略真實世界中的效能問題
接著談到的是關於產品被下載的速度測試，普遍存在一種迷思，那就是直接去看分析下載完成速度的「平均」數據，乍看之下好像可以得出一個滿不錯的「速度」，但是這會讓我們忽略其中很大一部分人感受到的下載時間，其實是屬於過長的狀況，而用「平均計算」的方式來呈現效能，就是目前最常見的作法。因此，講者希望我們不要再用概括的方式來介紹自己的產品效能，例如：「我測試了我們的 app，下載速度是 x.xx 秒以內。」事實上，這個秒數並不代表每一個單獨的使用者在下載時的效能，講者用一張長條圖舉例說明統計下載時間的現實統計，可以發現明顯的「長尾」狀態，顯示出許多人的下載時間是過久的。

網動廣告科技

參考資料：https://www.mydesy.com/google-io-2017

那些真正影響使用者體驗的網頁效能數據指標 – GOOGLE I/O 2017

2017-10-13

ABIES 上海綠映品牌形象網站

Post By admin 網路資訊

網站建置　網站改版　客製化網頁設計

簡單，是我們雙方很快就達到的共識，在這個快節奏的生活中，一切從簡才能更回歸初心。

ABIES 用減碳製造，只想在生活中產生美好，找回初衷，用簡單找到生活，他們期待，從產品中看到的世界，是永續循環的生態，即使只能留一方淨土，他們還是要做，被笑傻，他們掩飾不住的驕傲，努力留一塊綠意給未來，留到自己都享受不到為止。

就是這樣一份堅持的感動，讓通泰媒體和客戶有了第一次的共識，要將這一份「簡單」的美好願景，用虛擬的力量推動到世界的各個角落，能傳播到多遠就多遠，不只如此，更期盼能夠與更多相同理念的朋友們取得聯繫、共同在線上交流。

簡單，才最不容易，才最花心思，所以需要更深入的仔細規劃。

因為想讓用戶能夠對 ABIES 留下深刻的印象，通泰媒體在前期與客戶溝通的過程中，花了不少時間討論網站整體的架構，從視覺的細節定調、一直到內容的呈現。

這背後的目的只有一個，要讓用戶接收到最好的內容、最舒服的設計、最流暢的閱讀體驗。

讓第一次造訪 ABIES 網站的人，顛覆以往對工廠網站的想法，在這裡，ABIES 是明亮、舒適且充滿綠意的，造訪的人會對在這裡生產的產品充滿信心，並且堅信 ABIES 能在生活中能帶來想像不到的美好。

在看不見的地方，感受美好，如此你就能更深刻的記住這感覺。

ABIES 的理念，是藉由綠化與節能完成整廠的碳零排放量，從這一小塊地方，最終達到生產與地球的自然合諧，為每一個明天保留更好的環境。

為了將如此安全、純淨、環保的生產理念更有效地分享到世界，通泰媒體為 ABIES 規劃了品牌形象網站，讓核心的理念散落在平台的每一個角落。

網動廣告科技

參考資料：https://www.mydesy.com/abies

ABIES 上海綠映品牌形象網站

2017-10-06

沒有 GOOGLE DOODLES 看的日子，我根本可愛不起來

Post By admin 網路資訊

台北網站設計　網頁設計公司　網站設計公司

誰說科技公司無趣？Google Doodles 早已成為 Google 式文化的代言人。

2011 年，原本一直是靜態展示的 Google Doodles，開始在特殊又重大的事件、紀念日推出衍生短動畫，不僅畫風生動有趣，配樂也十分討喜，如今隨著技術的進步，時常附有線上互動體驗，但由於眾所周知的原因，很多中國網友無法及時看到。

入坑《中國有嘻哈》的朋友，這支一定對你的胃口。據資料考證，1973 年 8 月 11 日可視為嘻哈文化的正式誕生日，為了紀念嘻哈音樂誕生 44 週年，除了這支簡介嘻哈文化的小動畫，Google 還帶來了知名塗鴉藝術家 Cey Adams 創作的定制 Doodle，點擊圖中黑膠唱片機就能進入到歷史上經典嘻哈音樂的 DJ 互動教學了（動畫中也有所體現）。

網動廣告科技

參考資料：https://www.mydesy.com/google-doodles

沒有 GOOGLE DOODLES 看的日子，我根本可愛不起來

2017-10-06

設計大量內容的頁面時，該注意哪些 UI 設計準則？

Post By admin 網路資訊

網頁設計　網站設計　台北網頁設計

依專案的不同，在設計上需要考量的項目也有所不同。當我們接到需要呈現大量內容的產品設計任務時（如新聞、入口網站），該思考哪些要點呢？另外，使用者會不會因為大量內容而造成使用上的困擾？作者提出 6 大設計準則，讓設計師在進行這類相關設計時有參考的方向。

為何要談設計準則？

如果網頁上有太多區塊或細節，使用者相當容易迷失方向。以下提供幾項設計準則，可讓繁雜的資訊更容易理解並與讀者（使用者）互動。

網動廣告科技

參考資料：https://www.mydesy.com/web-design-3

設計大量內容的頁面時，該注意哪些 UI 設計準則？

2017-10-05

為什麼介面設計中，使用者的個人頭像大多是圓形的？

Post By admin 網路資訊

台北網站改版設計　台北RWD響應式網頁設計套版網頁設計

個人頭像的定義與發展

隨著網路用戶族群快速增加，他們對於藉由平台與其他用戶互動的需求就越高，也因此發展出許多可互動的平台類型，例如論壇、信箱、聊天室、部落格到社群等。其中每個用戶都代表著一個獨特個體（無論是真實身份或虛擬角色），這些個體會有相對應的資訊，以及代表個體的個人頭像。而個人頭像通常是具個性化（用戶覺得能代表自我）的標誌，大多以平面或 3D 圖像的方式呈現。

UI 上的個人頭像英文為 Profile Picture 或 Avatar ，其中 Profile Picture 在字義上較容易理解，反倒是 Avatar，各位讀者可能會充滿問號，因為大家對 Avatar 的印象應該都是阿凡達電影（藍藍的那齣 XD）。根據 techpedia 平台上的描述，Avatar 一詞出現於 1985 年，由盧卡斯電影公司（Lucas Film）內發展線上角色扮演遊戲（Habitat）專案人員（Chip Morningstar & Joseph Romero）首先提出。此詞源自於印度教對「聖人降臨（a descent of the Supreme Being）」的描述，在英文裡有「化身（incarnation）」或「代表（manifestation）」之義。

角度的邊緣，看起來較明顯

通常方形的銳利四角，因為對比（顏色或形狀）的關係，在視覺上會更明顯，造成干擾。使用圓形並無此問題，所以更可強調重點 –「臉部」。