評價好!巨匠電腦分享,10種不同類型的移動UI設計模式

錚/

1507091107140.png
巨匠電腦分享,10種不同類型的移動UI設計模式。

本文源自《移動應用UI設計模式》一書,原作名: Mobile Design Pattern Gallery: UI Patterns for Mobile Applications,由郭曉龍整理發表於雷鋒網,原作者為Theresa Neil,Theresa Neil 是德克薩斯州奧斯汀市的一名使用者經驗設計專家(UX)。書中提供了70多種行動裝置應用設計模式作為參考。此書台灣翻譯本叫做《行動介面設計模式圖鑑-以視覺範例學習有效的介面設計模式》,由鄭巧玉 譯,出版商: 歐萊禮,出版日期: 2012-11-05,簡體中文版是由人民郵電出版社出版,譯者 : 王軍鋒 / 郭偎 / 武艷芳。

【編者按】@圖靈教育  推薦了《移動應用UI設計模式》(台譯:行動介面設計模式圖鑑 )一書,在書中用戶體驗設計師(台灣一般稱做”使用者經驗設計師”或用”UX”)Theresa Neil,介紹了包括反模式在內的10種不同類型的設計模式無論你正在設計一款簡單的iPhone應用,還是開發適用於當前市場上所有流行移動操作系統的應用,這些設計模式都能助你一臂之力。
要設計出優秀的移動應用,就要先了解目前不同操作系統下優秀的設計案例。這本書的書名很明顯是受“四人組”《設計模式》的影響,將改善編程質量的方法用在了UI設計上。
其中收集了大量的界面設計圖片(iOS、Android、BlackBerry、WebOS、Symian和Windows等系統的應用截圖),對於移動應用界面設計師來說,這無疑是筆巨大的財富,可以將它們作為創作的靈感源泉。

書中介紹的設計模式有以下10種。

導航(台灣一般稱導覽)模式:

主要導航模式和次要導航模式。

表單:

登陸表單、註冊表單、核對錶單、計算表單、搜索表單、多步驟表單、長表單。

表格和列表:

只顯示最重要的信息。

搜索、分類和過濾:

讓這些功能易於使用。

工具:

採用直接、輕量化的設計。

圖表:

借鑒基本圖表的經典設計理念。

視覺吸引:

吸引用戶並促使其發現產品功能。

反饋與功能可見性:

向用戶提供適當、清晰且及時的反饋。

幫助:

應該易於用戶學習,讓用戶快速掌握應用使用方法。

反模式:

標新立異、隱喻錯位、愚蠢的對話框、圖表垃圾、按鈕海。

巨匠電腦開設了視覺設計的課程,除了跨界創意視覺設計、網頁設計教學外,為了因應行動裝置普及的趨勢,也有教授行動裝置UI的設計,快來巨匠電腦學習如何設計行動裝置的UI!

文章與圖片出處: http://goo.gl/aL388E
圖片出處: http://goo.gl/4jUbI9

 

成為超厲害網頁設計師!巨匠電腦告訴你網站過度設計的症狀

巨匠電腦分享,Google釋出專供網頁設計使用的Material Design Lite!

巨匠電腦分享,手機響應式網頁設計新取向─台灣五大案例分析!

巨匠電腦分享視覺設計實務,台灣設計師週「探索」主視覺公開

高評價!成為超厲害網頁設計師!巨匠電腦分享

錚/

成為超厲害網頁設計師!巨匠電腦分享網站過度設計的症狀

相信大家在網路上閒晃時,偶爾都會遇到讓您充滿疑惑,甚至是感到挫折的網站,本文列舉了許多現今大多數網站的問題。

設計問題

  • 網站上充滿著隨機的照片,裡頭要嘛就是一群正在開心工作的人,或是開心地在開會,或是有個人在用電腦。
  • 會自動輪播的照片,但你卻找不到可以控制它的按鈕。
  • 大量的動畫,淡入、旋轉或動來動去。
  • 彈出看似高級的設計。
  • 更多開心而忙碌的人們。
  • 網頁第一頁中心的大圖(Hero image)跟產品無關。
  • 每個頁面的 header 跟 footer 都長得不一樣,有各自的導覽列和 logo。
  • 網頁上藍色、畫有底線的文字卻不是超連結。
  • 字體顏色會與周圍或背景圖像融為一體。如果你想知道那適不適合閱讀,你早就該知道了。
  • 充滿創意的創新設計,而非大家習慣使用的佈局。
  • 不是過於擁擠,就是過於空曠、負空間過多。
  • 更多美美的照片。
  • 忽略可用性測試,直接打磨那些動畫和 CSS 漸層。
  • 設計過於極簡,以至於讓人不太確定那個網站是做什麼的。

1507281004100.jpg

結構問題

  • 超大的表單,上面索取的資訊不只是你的 email。
  • 同時有兩欄或三欄的內容同時在競逐你的注意力。
  • 進入畫面有自動播放影片或是背景音樂。
  • 用「聯繫我們」表單,而不直接告訴我們聯絡人的 email。
  • 好看是好看,但會讓人找不到「下一步」按鈕在哪裡。常常讓人不知道某個按鈕的作用,或是連結要連去哪裡。
  • 首頁塞進太多東西(關於我們、一覽表、最新消息、tweets、功能、優惠、合作夥伴、最新的 blog 文章。)
  • 太多事情要做了,我該註冊帳號、看更多(read more)、聯繫你們、申請優惠方案還是下載 app?
  • 沒有任何產品的截圖,到處都找不到。

文案問題

  • 「我們很棒!」或是「全世界最創新的公司」、「產業的領導者」、「專注在品質上⋯⋯」。
  • 我、我、我、我,也許跟你有關⋯⋯ 不,你眼前這個網站跟「我們」有關,講的是「我們」。
  • 充斥著一些比較弱的語言,例如「相信」、「想(think)」、「發現(find)」、「瞄準(aim)」、「努力(strive)」⋯⋯ 這些話通常只會出現在你們「還沒做到」某些事的時候。
  • 一般人(潛在顧客)看不懂的行話。
  • 列舉很多原因說明為什麼你們公司很棒,但卻不明說自己在做什麼。
  • 講了太多空洞的東西,使用者來這個網站是有目的的。
  • 使用文字進行資訊的溝通,而沒有直接呈現資訊。
  • 文案寫得超熱血,卻不告訴你賣的東西有什麼功能。
  • 寫了絕妙的文案,目的卻是娛樂使用者,而不是告訴他們有用的資訊。
  • 為什麼當你可以簡單地用「聯絡我們(Contact Us)」時,偏要自以為有創意地用「Reach Out」或「Connect」。
  • 好好寫一份公司的任務和願景文案,即便你的公司做的事跟其他幾百萬家公司一樣。

巨匠電腦開設了視覺設計課程,教你響應式跨平台網頁設計、跨界創意視覺設計等等,快來巨匠電腦輕鬆學!

文章與圖片出處: http://goo.gl/mpuANp

 

【視覺設計課程】巨匠電腦分享,時尚品牌幕後代筆者 — Nicolas Ouchenir

【視覺設計課程】巨匠電腦分享,跨屏介面設計的現況與未來

【視覺設計課程】巨匠電腦分享,10種不同類型的移動UI設計模式

【視覺設計課程】巨匠電腦:使用者介面設計的七個訣竅你知道嗎?

成為超厲害網頁設計師!巨匠電腦分享網站過度設計的症狀

錚/

成為超厲害網頁設計師!巨匠電腦告訴你網站過度設計的症狀

相信大家在網路上閒晃時,偶爾都會遇到讓您充滿疑惑,甚至是感到挫折的網站,本文列舉了許多現今大多數網站的問題。

設計問題

  • 網站上充滿著隨機的照片,裡頭要嘛就是一群正在開心工作的人,或是開心地在開會,或是有個人在用電腦。
  • 會自動輪播的照片,但你卻找不到可以控制它的按鈕。
  • 大量的動畫,淡入、旋轉或動來動去。
  • 彈出看似高級的設計。
  • 更多開心而忙碌的人們。
  • 網頁第一頁中心的大圖(Hero image)跟產品無關。
  • 每個頁面的 header 跟 footer 都長得不一樣,有各自的導覽列和 logo。
  • 網頁上藍色、畫有底線的文字卻不是超連結。
  • 字體顏色會與周圍或背景圖像融為一體。如果你想知道那適不適合閱讀,你早就該知道了。
  • 充滿創意的創新設計,而非大家習慣使用的佈局。
  • 不是過於擁擠,就是過於空曠、負空間過多。
  • 更多美美的照片。
  • 忽略可用性測試,直接打磨那些動畫和 CSS 漸層。
  • 設計過於極簡,以至於讓人不太確定那個網站是做什麼的。

1507281004100.jpg

結構問題

  • 超大的表單,上面索取的資訊不只是你的 email。
  • 同時有兩欄或三欄的內容同時在競逐你的注意力。
  • 進入畫面有自動播放影片或是背景音樂。
  • 用「聯繫我們」表單,而不直接告訴我們聯絡人的 email。
  • 好看是好看,但會讓人找不到「下一步」按鈕在哪裡。常常讓人不知道某個按鈕的作用,或是連結要連去哪裡。
  • 首頁塞進太多東西(關於我們、一覽表、最新消息、tweets、功能、優惠、合作夥伴、最新的 blog 文章。)
  • 太多事情要做了,我該註冊帳號、看更多(read more)、聯繫你們、申請優惠方案還是下載 app?
  • 沒有任何產品的截圖,到處都找不到。

文案問題

  • 「我們很棒!」或是「全世界最創新的公司」、「產業的領導者」、「專注在品質上⋯⋯」。
  • 我、我、我、我,也許跟你有關⋯⋯ 不,你眼前這個網站跟「我們」有關,講的是「我們」。
  • 充斥著一些比較弱的語言,例如「相信」、「想(think)」、「發現(find)」、「瞄準(aim)」、「努力(strive)」⋯⋯ 這些話通常只會出現在你們「還沒做到」某些事的時候。
  • 一般人(潛在顧客)看不懂的行話。
  • 列舉很多原因說明為什麼你們公司很棒,但卻不明說自己在做什麼。
  • 講了太多空洞的東西,使用者來這個網站是有目的的。
  • 使用文字進行資訊的溝通,而沒有直接呈現資訊。
  • 文案寫得超熱血,卻不告訴你賣的東西有什麼功能。
  • 寫了絕妙的文案,目的卻是娛樂使用者,而不是告訴他們有用的資訊。
  • 為什麼當你可以簡單地用「聯絡我們(Contact Us)」時,偏要自以為有創意地用「Reach Out」或「Connect」。
  • 好好寫一份公司的任務和願景文案,即便你的公司做的事跟其他幾百萬家公司一樣。

巨匠電腦開設了視覺設計課程,教你響應式跨平台網頁設計、跨界創意視覺設計等等,快來巨匠電腦輕鬆學!

文章與圖片出處: http://goo.gl/mpuANp

 

【視覺設計課程】巨匠電腦分享,時尚品牌幕後代筆者 — Nicolas Ouchenir

【視覺設計課程】巨匠電腦分享,跨屏介面設計的現況與未來

【視覺設計課程】巨匠電腦幫助你了解視覺設計師該決定什麼

【視覺設計見證】巨匠電腦分享羅申駿專訪:如何練出金曲26視覺設計?

巨匠電腦:大螢幕iPhone帶來使用者介面設計的3種改變

錚/

1507270957420.jpg
巨匠電腦分享,大螢幕iPhone帶來了使用者介面設計的三種改變
很長一段時間內,智慧手機產業區分都很明顯。Apple堅守小螢幕不改變,與此同時Google的Android手機卻越來越大。但是隨著4.7吋的iPhone6和5.5吋的iPhone6 Plus的發佈,這種分別消失了。大時代全面降臨。

對於那些之前做得很出色的開發者來說,接下來的工作並不是簡單地把現有的小界面擴展到大螢幕上。在與行內優秀的UI設計師交談中,很明確的一點是由於螢幕區域已經擴展到超越拇指所及之處,這將極大的影響到一些方面,比如按鍵的配置,手勢,內容佈局。接下來就是在下一波App設計中要注意的:

1.控制區域移動至螢幕底部

目前,將那些常用的按鍵配置在螢幕的上角還是非常普遍。追溯至像Mac和Windows這樣的桌面系統,不論是Twitter還是Apple自己的照片應用,你會發現那些受歡迎的應用都是把所有功能放在頂部的Navigation bar。但是在大螢幕移動設備上,那個頂部的bar用我們的拇指太難觸及。

「我們在想很多Apps都會開始考慮將主要控件放在屏幕底部而不是上方或者右上角,」Mark Kawano闡釋道,他是前Apple設計師,目前主要針對一個iPhone的App—Storehouse,解決其在大屏iPhone上可能出現的問題。這個應用主要是為移動設備提供富媒體故事發佈平台。在這個應用中,Kawano的設計團隊並不是將每個功能放在固定的位置,而是在操作的時候根據不同 內容出現在底部的不同Navigation bars。

Kawano並不是唯一這麼思考的。Google的產品總監Luke Wroblewski指出Google的Material Design設計原則很好的支撐了Kawano的設計邏輯。Google中叫做「行動按鈕」的這麼個東西就在屏幕下方三分之一處,或者會在整個移動設備的 右下角(不過對於右手操作的人來說這需要蜷縮他們的手指去按按鈕了)。

但是Loren Brichter(因發明Twitter的下拉刷新手勢而廣為人知)則提醒說將控件移至底部並不總是最好的選擇。「底部UI是一種對於困難折中的結果。人 們從上到下閱讀,我發現許多人完全忽略屏幕底部的東西,」他說。「如果你能放在底部並令人注意,那也不失為一種好辦法。」

他補充道:「另一種方式可以解決問題,聽起來有點匪夷所思但值得嘗試,那就是界面簡化為的特定數量以捲軸形式翻閱的內容區域。這樣用戶就會將要閱讀的內容手動拖到拇指可操作的範圍,而不用另外設置的完全不直觀的所謂可達性手勢。」

2.用手勢取代按鍵

按鈕設計在屏幕底部是一個好的選擇,但並不是最好的選擇。並且有一個一定會受歡迎的解決方案讓人們知道該怎麼操作,不論是五寸還是50吋。那就是手勢—或者更具體的說,輕輕一劃。

不久之前,Brichter 抱怨說UI設計師並沒有積極的將我們的手指滑動這一手勢利用充分。各種菜單及功能鍵都可以通過設計手勢來隱藏。以至於我們處在一個所有屏幕上端都是無用按鍵的階段,設計師沒有很強的動機去重新思考手勢的作用。

Mark Kawano指出,Apple的確在去年秋天公開的IOS7中加入了一個向右滑動後退的手勢,「可能他們已經知道更大的屏幕要來了。」 Storehouse這個應用就是聰明的借助Apple的設計趨勢:任何時候你在一個故事中,你可以向任何方向滑動退出。這在小螢幕上操作顯得精妙而且自由。但是在更大的螢幕上,Kawano覺得這就是必要而不是多餘的選項。

3.應用多功視窗

在手機上,無論橫豎螢幕,內容總是一個視窗的。一個窗口就全部塞滿訊息流。但是在iPad或者Android平板上,多功視窗模式則允許多個app在運行。

「為什麼不讓兩個拇指都動起來呢?」

Ashish Toshniwal,Y Media Labs的CEO(Y Media Labs為PayPal 和Amex製作AAA移動app)相信多功視窗將被用在app內,因為Apple在IOS8中支持了更多手勢,並且已經在超大的iPhone6 Plus中實現。自帶App比如Mail可以多功視窗使用,開發者們也會得到新的權限工具令其更加好用。目前,Apple的軟件套件允許開發者限定是否需要多功視窗,且多功視窗權限並不以iPad或者iPhone app分類,而是以螢幕大小來分類。並且他指出多功視窗就像剛被發掘出的客製化app的機會,能延伸出非常特殊的用戶需求。

「考慮到在免持模式下用GPS。iPhone6 Plus用戶可以利用多功視窗去運行他們的GPS,從而提供更好的全方位導航體驗,」他寫道。「舉個例子,在同一視窗模式下的,文字指示,切換路線,事故報告甚至音樂控制。」

Wroblewski 給我們看他之前BLOG上的內容,幾乎說道的都發生了。多功視窗模式是一個UI的機會,其簡單的人因工學原理口述都能表達清楚。當我們拿著筆記本或者一個「平板手機」在全景模式,你需要用兩隻手以保證設備平衡這不僅僅是一個大拇指的任務,而是兩個去完成UI的導航。為什麼不都給他們兩個點事情做做?

編譯者題外話:讀了這篇文章令小編想起了當初的N9+Meego,對於手持設備手勢交互的探索,沒有比它更激進的。這之後的各種手機或者應用的手勢設計思路都像是在為它致敬!所以下一期小編會發一篇老文章,讓我們來回顧一下那個系統大戰還沒有定論的年代!

巨匠電腦開設了視覺設計課程,教你UI使用者介面設計、響應式跨平台網頁設計等等,快來巨匠電腦輕鬆學!

文章與圖片出處: http://www.appshooting.com.tw/2014/09/leiphone0922/

 

【視覺設計課程】視覺設計也能賺錢? 巨匠電腦培訓課程挖掘你的創意

巨匠電腦分享視覺設計實務,台灣設計師週「探索」主視覺公開

巨匠電腦視覺設計分享,「箭頭斑馬線」讓行人自動分流

巨匠電腦分享,大螢幕iPhone帶來了使用者介面設計的三種改變

巨匠電腦分享,Google釋出專供網頁設計使用的Material Design Lite!

錚/

巨匠電腦分享,Google釋出專供網頁設計使用的Material Design Lite!

Material Design Lite內含的元件包含按鍵、文字區域、提示與選單等,強調基於開發人員熟悉的CSS、HTML與JS等技術打造,針對擁有眾多文字的網站進行最佳化,涵蓋行銷頁面、文章或部落格,此外,Google也已建置多款回應快速的樣版來示範MDL網頁。

1507230959200.jpg

Google在去年發表了Material Design設計語言,企圖統一在不同尺寸裝置的設計風格,初期主要應用在Android環境,不過Google本周釋出鎖定網站設計的Material Design Lite(MDL)。

Material Design的概念在於融合先進技術及設計經典準則,強調可讓介面更具立體效果,還有大膽的用色、動畫與即時UI陰影等設計。Google表示,如果開發人員對於使用CSS、HTML及JavaScript等網路技術來打造Material Design經驗感興趣,那麼就可考慮MDL。

Google說明,即使現在已有許多由社群主導的Material Design選項,但當要把Material Design部署到網站時仍存在著許多缺口,與其尋思如何修補這些缺口,Google選擇與Material Design團隊合作打造一個可同時相容於現代及未來變更需求的Material函式庫。

MDL所內含的元件包含按鍵、文字區域、提示(tooltips)與選單(spinners)等,強調是基於開發人員所熟悉的CSS、HTML與JS等核心技術所打造,並針對擁有眾多文字的網站進行最佳化,涵蓋行銷頁面、文章或部落格,此外,Google也已建置多款回應快速的樣版來示範MDL網頁。

以MDL所設計的網站可相容於Chrome、Firefox、Opera、Safari與微軟即將推出的Microsoft Edge瀏覽器,也支援IE 10與IE 11,而IE 9則只能體驗MDL的CSS設計。Google已於許多自家服務採用MDL,諸如Google Services或是DoubleClick的RichMediaGallery等。

巨匠電腦開設了視覺設計課程,包含跨界創意視覺設計、響應式跨平台網頁設計等等,快來巨匠電腦讓你快速上手!

文章與圖片出處: http://www.ithome.com.tw/news/97240

 

【視覺設計課程】巨匠電腦分享,時尚品牌幕後代筆者 — Nicolas Ouchenir

【視覺設計課程】巨匠電腦:使用者介面設計的七個訣竅你知道嗎?

【視覺設計課程】巨匠電腦分享,跨屏介面設計的現況與未來

巨匠電腦分享視覺設計實務,台灣設計師週「探索」主視覺公開