錚／
大開眼界!巨匠電腦分享創意UI介面設計動畫效果
看膩了靜態介面設計的圖案了嗎? 靜態的截圖往往沒有辦法真正讓使用者感受 UI 設計互動的美感與活力
而線框圖看起來總略顯枯燥。對於行動應用程序開發人員和設計師來說，透過互動的 GIF 動畫展示手機 APP UI 設計的概念與銀幕抓圖或一個特定的功能在 APP 中是如何互動或許是一個可愛且有趣的呈現技巧。
下面的列表包含 20 個極具創意的 APP UI 設計動畫效果，相信其中很多的設計你之前都沒見到過。
GIF ANIMATION OF TEMPLATE GALLERY
巨匠電腦開設了視覺設計課程，教你響應式跨平台網頁設計、使用者介面設計等等，快來巨匠電腦輕鬆學！
錚／
大開眼界!巨匠電腦分享創意UI介面設計動畫效果
看膩了靜態介面設計的圖案了嗎? 靜態的截圖往往沒有辦法真正讓使用者感受 UI 設計互動的美感與活力
而線框圖看起來總略顯枯燥。對於行動應用程序開發人員和設計師來說，透過互動的 GIF 動畫展示手機 APP UI 設計的概念與銀幕抓圖或一個特定的功能在 APP 中是如何互動或許是一個可愛且有趣的呈現技巧。
下面的列表包含 20 個極具創意的 APP UI 設計動畫效果，相信其中很多的設計你之前都沒見到過。
GIF ANIMATION OF TEMPLATE GALLERY
巨匠電腦開設了視覺設計課程，教你響應式跨平台網頁設計、使用者介面設計等等，快來巨匠電腦輕鬆學！
錚／
成為使用者介面設計高手 巨匠電腦分享UI設計趨勢
虎嗅注：在中國，行動端的發展遠遠超過網頁，初創公司們想拓展品牌都會首選手機 App。那麼你知道近期 App 設計風格的趨勢麼，想要做出不土、高逼格的 App，以下的趨勢你是需要了解的。本文來自 Medium 文章，Mobile:2015 UI/UX Trend。虎嗅翻譯。
無論是 App 的分螢，還是網頁瀏覽器或者智慧手錶的界面，設計都是消費者購買它們的最關鍵因素之一。從扁平化設計到谷歌的 Meterial design，我分析了設計的流行趨勢，並將其與你分享——這些趨勢是什麼？為什麼這樣做用戶更喜歡？它們是怎麼樣被創造的呢？
讓我們一起看下扁平化設計和 Material design 是怎樣入場，並為我們帶來了怎樣的設計趨勢的。
● 是什麼
放棄了使用漸變或陰影等效果，現在 App 中更流行使用「扁平化設計」風格，給人一種「更輕」的體驗。這意味著設計師要善於利用負空間（指物體和物體的間隙）——來取代漸變、陰影等效果，以創造一個更加簡潔的界面，讓用戶的注意力可以集中在界面的核心信息上，將對用戶無效的設計元素去掉。
● 為什麼
更輕的設計將多餘的設計元素去掉，這樣可以讓用戶的眼睛只注意對他們有意義的信息上，這樣也降低了用戶在該界面的導航成本，同時也使品牌更具時尚感。
● 是什麼
減少不同種類字體的使用更能體現排版美學。與其用不同的字體形式表現不同的特性——比如，斜體、加粗、半加粗，不同的字號更能將不同部分的內容加以區別。
● 為什麼
在整個 App 中只是用一款字體可以為品牌帶來一致性的感受，這種效果是跨平台的，比如 App，行動端網站、PC 端網站。因此，優化行動端的設計細節是可以全方位提升用戶體驗的。同時，用戶更喜歡統一的字體帶來的簡潔化。
● 是什麼
過去，我們使用線條來將不同的內容主題或分類明顯地劃分開，但是這些線條卻創造出一個笨拙的擁擠的界面。取而代之，我們可以將不同的內容放置於不同的卡片塊兒上，使用空白將不同內容塊劃分開，這樣我們就可以騰出空間，搭建一個乾淨的界面。
● 為什麼
分界線的棄用是為了帶來一個具有現代感的外觀，使用戶注意力集中在功能性上。比如，我們放大圖片和字體的大小，這樣一來，視覺體驗更加清晰，產品易用性也得到了提高。利用空間來取代分界線是一個順應用戶使用習慣的選擇。
● 是什麼
因為用戶傾向於使用更加簡潔的界面，所以利用大字號和醒目的顏色來顯示具體的數據可以使用戶的注意力更加集中。可以通過高亮數據來吸引不同的目標客戶。
● 為什麼
利用更大的字號或者一種流行色，來吸引用戶的注意力到一個螢幕的一個特定區域——這完全不會給用戶帶來強迫感。所以，用戶可以更快地接收到有效信息，導航和閱讀信息的體驗也會更好。
● 是什麼
微交互在使用場景中是一個很小的用戶體驗的改變。這些場景包括完成一個交易，收藏喜歡的物件或者彈出一個消息。這些交互都是很細節的，但是產品的差異性就在於給合適的用戶使用合適的效果。
● 為什麼
這些微交互像是信號一樣驅動這用戶去完成一項任務——比如調試設置——創建一個新的內容彈出窗口。有微交互的那些 App 可以給用戶帶來更簡潔、更有趣、更有參與感的感覺。
● 是什麼
在 2013 年扁平化設計推出後，在主題中使用更少的顏色變成了一個流行趨勢，這樣可以使設計變得清晰和簡潔。所以，設計師和用戶都更喜歡顏色更少的設計，以求一個更乾淨的外觀。
● 為什麼
顏色的運用在表達情緒、引導用戶注意力、品牌深化上都有著重要作用。採用更少的顏色能更容易突出品牌特性。另外，用戶也喜歡這樣美觀的界面，關鍵元素可以被輕易突出，導航體驗也更好。
● 是什麼
過去，界面設計遵守擬物化的原則，就是模擬一個物體的真實形態（比如，數字日曆對紙質日曆的模仿，App 圖標的 3D 縱深，手機快門的咔嚓聲等等）。現在，扁平化設計已經不再採用這一原則，它使產品設計者可以用新的方式展示縱深效果——分層設計，可以更好地體現出縱深和規格化的感覺，為用戶提供一種更直觀的體驗。
● 為什麼
扁平化設計最終導致的結果可能是「過於扁平」——隨著設計越來越簡化，用戶還怎麼被引導和吸引，畢竟這和他們在 3D 現實世界裡的經驗並不一致（或者說和過去的產品體驗也不一致）？分層提供了將一個條目放在另一個之上顯示的可能，它充分利用了 Z 軸。分層和增加深度可以幫助用戶理解不同條目之間的關係，並且把他們的注意力吸引到你需要他們關注的地方。
● 是什麼
幽靈按鍵是指沒有被填上顏色的透明按鈕。它們有著非常細化的邊緣，並且形狀往往很基礎，比如矩形、正方形或者直角、軟化邊緣等。這些按鈕中的文字往往很簡單且很小。
● 為什麼
這些設計得很微妙的按鈕可以吸引用戶注意力，而且看上去還很乾淨、時髦、不會惹人煩。它使你可以在螢幕上放置更多層級的按鈕，如果在同一頁面上有不同的按鈕，你可以根據優先度排列他們（比如那些提供選項的或作為中間步驟的幽靈按鈕）。在一些 Material design 的情況下，你可以通過陰影來提示用戶某一按鈕所屬的層級和優先度。
● 是什麼
隨著用戶設備集成了陀螺儀和動作傳感器的功能，它能夠更好地感知動作。有了這些，用戶和設備之間的交互方式從鼠標點擊拓展到了真實手勢上。
● 為什麼
用戶對一些手勢有著出於直覺的敏感。當要刪除某個條目時，不管哪個年齡段哪個性別的用戶都會試圖把它移出螢幕。事實上，更少的點擊和更多的滾動可以提升用戶體驗，通過用手勢在螢幕定位而非點擊目標可以讓你的應用看上去交互性更強。
● 是什麼
通過軟體創新，設計師現在可以利用樣式表控制運動。基於動作的設計元素能夠以多種多樣的形式呈現，包括過渡、動畫效果甚至模仿 3D 效果的紋理。設計中對動作的使用可以幫助用戶接觸和吸收內容，這和以往通過數據和對象來突出內容重要性的方式已大有不同。
● 為什麼
動作元素能夠將用戶注意力吸引到一個明確的區域——或者把他們的注意力從那兒移開。通過視覺響應，它可以增進用戶對內容的理解，並促使用戶產生一種愉快的體驗。
● 是什麼
相比通過複雜的頁面介紹如何使用產品，一個簡單的界面就可以幫你省去教育用戶的麻煩，並且減輕你投入到 App 上的不必要的時間和精力。例如，當用戶完成前面的字段輸入後，一個表單可以自動打開或突出後續的輸入區域，以此提示用戶後續操作。
● 為什麼
手機用戶更喜歡在一個 App 中簡潔、快速地完成操作，尤其在他們忙碌的時候。根據人們的這個需求，在設計上縮短用戶的使用流程，這可以增加轉化率以及人們打開 App 的頻度。
● 是什麼
設計標準是從項目啟動之初就注入其中的視覺語言，它涉及到顏色、圖標和整體風格的設定等。
● 為什麼
設定設計標準可以幫助產品在不同平台上形成更好的統一體驗。它能將產品投入市場後可能產生的錯誤壓到最低，並使其在未來更易於被修正。
● 是什麼
原型可以是對一個產品的演示，也可以是早期的可上線版本。使用原型能夠提供一個更直觀的視角去觀察產品功能設計，以及產品想要讓人看到的充滿亮點的更新，這可以提升用戶體驗而不必浪費設計師太多時間和精力。
● 為什麼
通過創造這些低成本的「試驗品」，可以方便地釐清項目的關鍵因素，包括功能特徵和需求等。它留給我們必要的時間和資源從「試驗品」了解產品，用內部驅動的過程推進產品迭代。
巨匠電腦開設了視覺設計課程，教你響應式跨平台網頁設計、使用者介面設計等等，快來巨匠電腦輕鬆學！
文章與圖片出處: http://goo.gl/BlFpWG
錚／
巨匠電腦分享，手機響應式網頁設計新取向─台灣五大案例分析！
*** 1.1 智慧型手機普及率逐年上升**
在智慧型手機發展盛行趨勢下，在全球擁有智慧型手機的普及率逐年上升，在國內2011至2013年智慧型手機普及率在各個年齡層上都是呈現上升趨勢，特別是在2013年時，18歲至44歲之使用者上升至六成以上，而25歲至34歲高達七成五，可以顯示智慧型手機已經是普遍性的產品，對於使用者具有相當的重要性。
資料來源:
ThinkWithGoogle
*** 1.2 使用智慧型手機上網頻率**
到底消費者使用智慧型手機上網都在做些什麼事情呢？85%智慧型手機使用者會從事與網路相關事物，78%智慧型手機使用者會利用手機瀏覽網路內容，由以上數據可知，顯示網頁對於智慧型手機使用者具有相當高的重要性，因此我們必須更深入探討網頁介面設計能否符合智慧型手機使用者，並提供最佳瀏覽畫面。
*** 1.3 智慧型手機促使消費者改變購買方式**
70%消費者每月至少使用手機購物1次以上，比例更是逐年上升當中，而高達87%消費者會使用智慧型手機來研究產品或服務。不論最終是否完成購買，消費者期望智慧型手機能提供的產品資訊是有效且多元的。如果網站提供的資訊不足驅使消費者需要透過其他管道來了解產品，商家很有可能就錯失了驅動消費者直接購買的先機。
*** 1.4 國人偏好大螢幕手機**
研究指出在國內擁有智慧型手機民眾中有近7成是使用較大螢幕的智慧型手機，根據Vpon 統計指出2014台灣10大手機機型排行，半數以上為5吋以上大螢幕手機，其中排名第二、第三與第十名的iPhone系列，雖為4吋以下小螢幕，但在Vpon 統計iPhone 6上市後，在蘋果機種銷售排行榜中，iPhone 6即升第四與第五名，顯示上市後促使蘋果使用者換機潮。
*** 1.5 製作行動網站的必要性**
製作行動網站好壞會影響消費者使用手機購買的關鍵，過去行動裝置螢幕小（螢幕尺寸太小占53%），行動上網技術還未完全成熟，至2012年底近五成消費者從手機獲得資訊後，會再透過電腦購買，而近三成消費者會再到實體店面購買。該探討的原因很多種，但消費者換電腦購買的過程很有可能打消消費者購買意願，因此在介面空間有限的情況下，如何去解決消費者的疑慮與問題，讓消費者願意使用手機直接進行交易，手機版網頁設計顯得相當重要，我們要如何解決這些原因呢?
1.6 本篇文章為何不考慮APP?
手機版網頁與app型態作用與特性不同，手機版網頁不需經過下載即可瀏覽，本文章探討的包含透過第一次瀏覽品牌的使用者，因此我們針對手機版網頁進行探討。
歐斯瑞將在以下文章使用iphone6 Plus以及國內知名網頁，探索台灣使用者偏好使用的手機版網頁介面設計特性。
2.1 使用者體驗與使用者介面設計很重要
使用者體驗是一種主觀性，個人化的經驗。消費者在使用特定產品或系統或服務時，以實際體驗、情感、俱有個人意義（個性化）以及，有價值的人機交流、和產品所有權方面的問題。使用者介面是指與硬體之間溝通、互動的媒介，目的在使得使用者能夠方便有效率地去操作硬體以達成雙向之互動，而完成所希望藉助硬體完成之工作。以下將觀察範例內的使用者體驗部分並給予評分。
在以下的範例中，我們將整理出10種要素來探討：
- 是否簡化手機網站內容，去除不必要或次要的元素。
- 是否採用單一方向，一致性操作方式。
- 手機介面是否採用易閱覽的單欄式版面設計。
- 是否在設計上避免另開新視窗或彈跳視窗功能。
- 是否容易利用手指動作操控網頁。
- 減少輸入欄位
- 導引網頁的動作由滑入改點擊。
- 盡可能空出畫面。
- 使用響應式設計。
- 善用手機特性。
1.盡量簡化您的網站
因為手機介面較小，所能呈現的東西相當有限，必須去除不必要的或是次要的內容，但這些內容往往會不知如何取捨，特別是購物網站有很多功能都是必須的，這會需要經過較專業評估與決策來取捨。後面案例中我們可以看到，都有盡量簡化他們的網站，但有些網站本身資料就相當的多，縱使簡化了，看起來還是略顯複雜，並不是還得再簡化這些功能與資訊，我們必須透過良好的溝通與謹慎評估後，以及測試和改善，去了解您的網站使用者最需要的功能與資訊等，再對您的網站作簡化，而在簡化過程中並不是將其刪除，可以透過收合、非必要時隱藏以及必要頁面再放入該功能。
2.單向操作
在選擇目錄等情況下，例如選單下拉展開後再左右滑動來作選擇，也應統一方向操作。
3.單欄式設計
使用單欄式版塊，避免使用者接收資訊與閱讀上的困難，不建議在手機上超過兩欄式設計。
4.不要使用或減少另開新視窗
另開視窗對使用者並不友善，案例中還是會有使用的情況，或許不能避免使用，但建議應減少使用。
5.讓手指能容易操控
手指比游標大的多，所點擊範圍較大，所以在設計按鈕時範圍不宜過小。
6.減少輸入欄位
由於手機打字不像電腦打字容易，應減少打字的必要，可使用選擇方式代替輸入文字。
7.滑入改點擊
在手機上沒有滑入時的效果，因此要改變成點擊，並且點擊後要給使用者立即的回饋，使用者才能得知確實點擊到所想要的按鈕。
8.盡可能空出畫面
不要放太多的物件與功能維持在畫面上，若放置使用者在使用當下並不會經常使用到的功能在畫面上，反而會引起使用者反感。
許多案例中都有將某些功能保持在畫面上，但放置於左右側會將部份網頁內容遮蔽住，影響使用者操作與閱讀，建議放置於上方或下方降低影響，必要時可判斷使用者向下滑動時收起選單，而盡可能的空出網頁內容，這會是一個很良好的判斷方式。
9.使用響應式設計
在國外響應式設計已是網頁設計趨勢，目前國內多數手機版網站是利用判斷使用者裝置是否為手機後，而導向至手機版網站(轉址)，如能使用響應式設計可以避免掉轉址、效提升IOS效率以及更方便管理。
10.善用手機特性
善用手機本身的優勢，例如點選電話手機直接撥打，手機上分享也相較於電腦來的容易許多。
良好手機版網頁設計分享
1.多商店購物網站(全站購物車統一) — GoHappy購物網
(資料取自官方網站，歐斯瑞有限公司製作)
簡介：
為台灣全方位購物網站，販售商品從電子用品，保養品，服飾配件，到親子用品，美食等等都有。
建議：
整體上將複雜的商城簡化了很多不必要的元素，並將選單展開方便使用者第一眼便可以看到所有品項，並將常使用功能保持在畫面下方，方便隨時點選。產品圖片中帶入略多的文字，由於產品下已有文字說明，建議可以試著再簡化掉不重要的文字或放置於品名中。部分文字由於放入在圖片中問題，顯得過小不易辨讀，可使用別的排版方式，或將文字取捨簡化後再放大。部份區塊稍微小了點，如會員登入與加入會員，建議可以收合。有著自動載入產品不必切換上下頁功能，但頁尾有提供次選項，卻也因此一直選不到次選項，建議可以收合於上方或改成頁面切換方式。
2.多商店購物網站(多店購物車) — Pinkoi
(資料取自官方網站，歐斯瑞有限公司製作)
簡介：
提供給設計師販售設計創意相關商品之平台。
建議：
本案例有非常良好的設計值得推薦，當使用者在向下滑動畫面時，會自動收合上方選單部份，而盡量空出畫面來顯示內容。因著重商品的設計上而只留下產品圖片，畫面顯得特別乾淨。些許文字按鈕略小，建議可以間隔加大或字級加大，讓使用者更容易點選。
3.單一品牌購物網站 – Lativ
資料取自官方網站，歐斯瑞有限公司製作)
簡介：
網路販售男性、女性、兒童平價服飾。
建議：
使用區塊呈現網頁訊息，沒有過多文字說明，字級並能容易閱讀，也由於是販售自家商品，在文字圖片整體設計都很統一，讓整體介面能夠乾淨並整齊。
4.團購網站 — Groupon台灣
(資料取自官方網站，歐斯瑞有限公司製作)
簡介：
經由網路販售團購優惠劵之平台。
建議：
本身設計沒有過多資訊給予使用者，很容易理解與操作，名稱與說明文字的字級建議可以加大，更方便使用者閱讀。
5.資訊型的響應式網頁 — ㄇㄞˋ點子靈感創意誌
(資料取自官方網站，歐斯瑞有限公司製作)
簡介：
為線上設計創意文章分享網站。
建議：
文章區塊相當分明，整體簡單乾淨。保持在畫面上的分享功能，時常擋住按鈕與文字，影響了操作與閱讀，可考量其必要性後做取捨，或放置於下上並收合。
分析比較表：
在研究中我們可以得知智慧型手機已經越來越普及，也成為大多數消費者從事網路相關事物的裝置，也因此網站提供給手機良好操作介面是相當重要的，也是未來發展趨勢。使用手機購物消費者人數已逐年上升，目前手機版網頁設計讓消費者還有著許多疑慮，而不願意在手機上進行交易，解決這些部份原因就需要良好的手機版網頁設計。而手機螢幕尺寸相當多種，一個網站要能方便各種手機消費者接收資訊與操作，在介面與系統需要審慎的考量。
巨匠電腦開設了視覺設計課程，內容包含響應式跨平台網頁設計、跨界創意視覺設計、全動態購物網站設計等等，想要學視覺設計就快來巨匠電腦！
參考資料：
Think with Google統計/ Vpon統計 / 維基百科 / webcredible
GoHappy購物網 日期2015/1/15
Pinkoi 日期2015/1/15
Lativ 日期2015/1/15
Groupon台灣 日期2015/1/15
ㄇㄞˋ點子靈感創意誌 日期2015/1/15
文章與圖片出處: http://www.bnext.com.tw/article/view/id/35307
【視覺設計見證】學員自我評價提升競爭力，巨匠電腦讓我家鄉就業成功