高評價!成為App設計高手 巨匠電腦分享UI/UX設計趨勢

錚/

1508070910530.jpg
成為App設計高手 巨匠電腦分享UI/UX設計趨勢

虎嗅注:在中國,行動端的發展遠遠超過網頁,初創公司們想拓展品牌都會首選手機 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 的頻度。

  • 設計標準——實踐才是真

● 是什麼

設計標準是從項目啟動之初就注入其中的視覺語言,它涉及到顏色、圖標和整體風格的設定等。

● 為什麼

設定設計標準可以幫助產品在不同平台上形成更好的統一體驗。它能將產品投入市場後可能產生的錯誤壓到最低,並使其在未來更易於被修正。

  • 原型設計——實踐才是真

● 是什麼

原型可以是對一個產品的演示,也可以是早期的可上線版本。使用原型能夠提供一個更直觀的視角去觀察產品功能設計,以及產品想要讓人看到的充滿亮點的更新,這可以提升用戶體驗而不必浪費設計師太多時間和精力。

● 為什麼

通過創造這些低成本的「試驗品」,可以方便地釐清項目的關鍵因素,包括功能特徵和需求等。它留給我們必要的時間和資源從「試驗品」了解產品,用內部驅動的過程推進產品迭代。

巨匠電腦開設了手機APP設計課程,教你應用程式開發、使用者介面設計等等,快來巨匠電腦輕鬆學!

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

巨匠電腦,讓我更有信心!

巨匠電腦,打破了我的不安心!

巨匠電腦退費經驗

令人意外的巨匠電腦退費過程

評價好!App設計秘訣 巨匠電腦分享ios8 App設計陷阱

錚/

1508060927140.jpg
翊)App設計秘訣 巨匠電腦分享ios8 App設計陷阱
就在不久前,大家興奮的觀看完蘋果深夜發表毫無意外驚喜的 iPhone 6 與話題性的 Apple Watch 後,沒過幾天,FB 上面 iOS 開發者的朋友,許多人都收到了一封令人意外而且恨的牙癢癢的 Email,開頭通常是這樣的:

Hello 開發者,

Your app 孕婦瑜珈 – Squat deeper , jump higher ! (你的 APP 名字)has been reviewed, but we are unable to post this version. For details, or to directly contact the App Review team, visit the Resolution Center in iTunes Connect. Do not reply to this email.

Regards,

App Review

對,是的,你被 Reject 了。

被 APPLE Reject 的原因是 iOS 開發者的月經文話題,但最近這次卻是因為「在 iOS8 上無法正常啟動」這鳥原因。

我說庫克老兄啊,貴司這不是玩我們嘛,倒是在發表前給我支 iPhone 6 當開發機啊!

後來一些資深的開發者朋友語重心長的跟我們分享經驗,在預測 APPLE 有可能發表新機的那一個月,送審要有被退的覺悟。(問題是要怎麼預測啊?)

一連串兵荒馬亂之後,我們陸續完成了重新送審的申請,但在這個過程發現一些狀況,特別分享給近期將送審的開發者朋友們參考,特別是你有不得不趕緊上架的行銷時程 … …

  • 畫面尺寸的陷阱,見鬼的 1080p 是一場騙局

在這邊我們要怒吼一下,APPLE 為了 iPhone 6 plus 的 5.5 吋物理尺寸,而在實際顯示時,其實是偷偷將畫面縮小了。所以設計師們,讓 1080p x 1920p 解析度見鬼去吧,你真正在 Photoshop 要做稿的尺寸是 1242px x 2208 px(特別是送審用的截圖要做成此畫面尺寸)。

詳細的說明請參考 PaintCode 一文:iPhone 6 Screens Demystified
我懂你懶得看英文,附上對岸親切的簡中版:【原】iphone6 来了,我该做点什么

  • 更新你的 Xcode

近期送審時都需要使用 Xcode GM 版,但有些災情顯示會需要更新 MAC OS(但我們沒有),退件的一個理由可能是「在 iOS8 加 iPhone5s 下功能無反應」(這就是見鬼的地方,之前哪來的 iOS8 給你測)。

此問題目前用新版 Xcode 重新 build 過,在模擬器上看起來會正常,但送審會怎麼樣,只有老天跟 APPLE 會知道。

  • 鼓起勇氣再次送審

關關難過關關過,只有繼續送審才會知道結果,就像創業一樣,產品上了才會知道。
從此以後,iOS 開發者也開始品嚐從前嘲笑 Android 多尺寸畫面的苦果,歡迎來到多尺寸的世界,開發者的頭,豈止於大

送審的路上,一切 Good luck.

巨匠電腦開設了APPLE實務應用課程,教你iPhone應用程式開發與應用、Mac視覺創意設計等等,快來巨匠電腦輕鬆學!

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

 

我在巨匠電腦學到很多東西

感謝巨匠電腦 我跟我女友要結婚了

聯成和巨匠電腦怎麼比。從電腦課程看比比

巨匠電腦vs聯成電腦 巨匠電腦好!

評價讚!變身超強介面設計師!介面設計趨勢─動畫效果

錚/

好的動畫效果有甚麼要點呢?在於使用者是否可藉由真實世界的行為或現象聯結產品的操作行為,如:慣性、速率(speed)、彈性或速度(velocity)。

優秀的作品常運用漸變等動態效果來傳達故事與功能。

 

動畫效果的導引原則

Google 提出的 material design guidelines 中提出這樣的觀點:開始思考動畫效果能扮演怎樣的角色,是一個改善體驗的起點。

感知物體的具體(物理)形式可幫助我們理解如何操作它。觀察物體的動作可以告知我們它是輕是重?是軟是硬?是大是小?

當我們在設計選單系統(menu system)或視覺元素時,這是一個需要關注的點。

 

物體進行移動時,應該考慮真實世界中的物理現象。

介面不應該讓人感覺明顯地機械性,要應用真實世界的運動法則,這樣有助於使用者認識數位環境並與之互動。

漸變是最基本的動畫手法之一,但一個 app 要能討使用者歡心,其效果必須是協調、不突兀的。

例如:一個選單 icon 協調地變成箭頭播放鍵,就是一個讓使用者驚喜的好方式。
這邊有幾個網站,應用不錯的動畫效果與手法,提供大家參考:

  1. Slavery Footprint
  2. Apple’s Mac-Pro
  3. Oakley’s MX Goggles

 

工具和技巧

儘管我們期待 2015 年有許多新工具的出現,但我們建議參考基礎的 Animator’s Survival Kit – 一個很棒的學習傳統動畫法則的資源。

我們使用 AE(After Effects)去呈現 UI 的操作方式與動畫效果。它可以製作出逼真的效果,來協助團隊理解完成時會如何呈現,同時也幫助我們探索更多概念。另外,也有一些快速製作原型的工具,如:Invision,此工具涵蓋基本的過場效果與動作,協助實現於你的 UI 設計。

 

後記

如何透過動畫效果,讓使用者獲得更佳的操作體驗這篇文張提出了判斷動畫效果好壞的原則:若取消動畫效果,使用者應該會感受到過程是不完整(美)的。若不會,則代表動畫效果就是多餘的。以下範例可解釋這原則。

 

1. 透過動畫效果傳達脈絡:

如果拿掉動畫,是不是會有人不知道要填電話號碼?


2. 搖頭, say No:

透過與真實世界的動作或現象做聯想,讓使用者更容易且深刻的瞭解網站所想傳達的訊息內容,如下圖透過左右擺動的動態效果來傳達使用者輸入錯誤的訊息,讓使用者馬上聯想到有人向他搖搖頭 say no,除了達到訊息的傳達以外還讓使用者印象深刻,感到良好的使用經驗!


3. 玩些小技巧:

等待總是漫長的,如何讓使用者有耐心的等待?加入一些動態效果有助於分散等待的注意力,讓等待的“感受”不是那麼的漫長,人們在等某件事時,時間過得非常慢。利用動畫效果讓使用者在等待的情況下,感覺上快一點。


4. 按鈕變化:

代表操作的狀態也改變,讓使用者可以很清楚地知道現在是什麼情況。


5. 如虎添翼的動畫:

雖然拿掉它對於功能上是沒有什麼差異的,但在使用者經驗上卻是大有差異。

這個動畫效果看起來很炫,讓使用者感到開發者追求完美並關注細節,情不自禁的會更加相信這家網站。

巨匠電腦開設了手機APP設計課程,教你iPhone、Android應用程式開發與應用、使用者介面設計等等,快來巨匠電腦輕鬆學!

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

 

巨匠電腦讓我這樣的菜鳥都可以成為動畫師啦!

去巨匠學動畫,菜鳥也可以出頭天!XD

推!退費經驗分享 感謝巨匠電腦

巨匠電腦退費經驗分享

評價讚!介面設計師保護智財 巨匠電腦讓你三分鐘看懂設計專利

錚/

介面設計師保護智財 巨匠電腦讓你三分鐘看懂設計專利

早期,大多數企業並不重視設計專利,認為很容易被迴避。直到 APPLE 對競爭對手發動設計專利訴訟戰,並透過舉證成功的牽制對手後,才逐漸扭轉大家看待 設計專利 的價值觀。然而,專利訴訟在商業戰略上的思考與應用層面,並不是設計師該處理的項目。但由上述的例子來看,設計師所創造出來的設計價值,已跳脫增加產品銷售、改善生活、帶來更好的 UX 等傳統效益(當然這還是很重要,並且是設計師們最關注的)。所以設計師在知識領域的增進,需跨出單純"做設計"的小框框;同時也應多關注新聞動態,了解專利對產業的影響。甚至在設計前透過專利檢索,來降低未來產品推出被訴侵權或迴避的機會,也許還能由檢索中得到設計的靈感!不過,大部分的設計師並不會在設計前進行此步驟,原因當然有很多,其中有一大部分是沒有友善的工具,以及對專利知識不足而懼怕或排斥。所以這次大舌頭會以免費好用的工具(Patentcloud.com)與美國設計專利(以 Icon 與 GUI 為主)為素材來分享相關的初階知識。

1508030921440.jpg

設計專利的定義

各國專利局對設計專利的定義不同,但基本上就是針對物品的形狀、花紋、色彩、圖案或其結合的應用創作所得到的權利,並與功能完全無關,詳細的法條規定可以看這裡。而我們這次要談到的電腦圖像(Icon)與圖形化使用者介面(GUI)在主要的專利局(美國、歐盟、大陸、日本、韓國與台灣等)皆在申請的範疇內。

 

Icon 與 GUI 申請專利的範圍

大致上,由台灣官方的描述就可清楚的了解其定義與能申請的範圍 : Icon 為單一的圖像單元,而 GUI 是由數個圖像單元及其背景所構成之整體畫面。並分為三種態樣:(1)可提供點擊操作或指示狀態訊息之電腦圖像;(2)包含數個圖像單元及其背景所構成之圖形化使用者介面;(3)其他 Icon  &  GUI。此外,Icon 與 GUI 的連續變化過程,也能申請設計專利,例如滑鼠 hover 後的互動效果。

不過,能否申請到設計專利的權利,在於必須滿足基本的專利要素,例如:台灣設計專利必須是應用於物品之外觀設計,且應符合產業利用性、新穎性及創作性。以美國設計專利來說,必須對物品的設計,符合實用性、新穎性與非顯而易見性,並且不能對民族、宗教、性別與人種等敏感議題有所冒犯。如果想要深度了解,建議可參考各國專利局所頒布的法規。

 

專利說明書的重要資訊

設計師不太想碰專利的最大原因,在於專利說明書內容太過專業,及非普遍的語言用字,所造成的知識缺口。所以大舌頭會以 hTC 美國設計專利為例,簡單的說明相關的專有名詞,設計師們便能輕鬆的理解專利的內容。

首先,先將 USD711921(專利號)複製到 Patentcloud.com 的輸入框內並檢索(可檢索超過90個國家),看到專利圖示後大家應該不陌生,它是 hTC Sense UI 轉扁平化風格後,在天氣 widget 上的 Icon。接著,我們將滑鼠置於專利上並按下出現的"查看全文",會跳出詳細的專利資訊頁面。在這個頁面上,專利名稱下方有一排 tab,除了"原始文件"為官方的專利說明書外,其他皆是 Patentcloud.com 根據官方資料整理出更好閱讀的內容與介面。我們就由"全文"與"原始文件"上出現的專利資訊與名詞稍做解釋吧!

請以號碼對應於下方美國設計專利說明書與 Patentcloud 介面之圖片:

(12)文件類型:
顯示此文件的類型,如發明專利公開說明書、發明專利公告說明書、設計專利或植物專利等。底下為第一發明人的姓氏。

(10)專利號:
當已核准專利公告時會取得公告號,美國專利號等同於台灣的公告號,後方會有一字母或字母加上數字的類別碼(kind code)以快速區別專利的類型與狀態,如 S 就是設計專利,其他類別碼的意思可參考官網

(45)公告日:
被核准的專利發佈日期。

(54)專利名稱:
申請人此專利的命名。

(72)設計發明人:
可看到設計發明人的姓名、居住地與國別。

(73)專利權受讓人:
享有此專利權利的人或企業。

(21)申請號:
提出專利時,專利局給的申請號碼。

(22)申請日:
提出專利申請的日期。

(51)國際工業設計分類號 LOC:
此為羅卡諾協定之國際工業設計分類方式,提供同盟的會員國使用於官方文件以及和工業設計之註冊登記與延展有關之出版物上,可由此網站查詢其代表的分類為何。

(52)美國分類號 USPC:
代表設計所屬的美國專利分類類別。

(58)分類號檢索範圍:
專利審查委員在審查本專利時,檢索過的美國專利分類號。

(56)引證資料:
Patentcloud.com 將相關資料獨立於"引證資訊"頁籤中呈現,並分為向上引證(即此專利參考引證的相關資料),以及向下引證(被哪些專利參考,資料會隨時更新)。

(57)權利項:
定義專利的保護範圍的部分

(A)說明:
解釋圖示


美國設計專利說明書


Patentcloud 介面

設計專利圖怎麼看?怎麼畫?

不知道大家有沒有覺得設計專利上的圖怎麼長得那麼奇怪,跟實際產品樣貌差很多,但其實這就是設計專利規定的圖式表示方法。通常實體產品(手機、平板等)皆要求完整的表達整體外觀,所以需提供前視圖、俯視圖與右側視圖等(立體圖並非必要,只要清楚明確揭露該設計即可,多餘視圖可省略);但 Icon & GUI 因為是顯示於一平面上,所以不需表示多視角的圖面。另外,若色彩並不是設計專利欲主張的一部分,就不必提供彩色圖面了,以黑白雙色繪製。

申請設計專利時,設計師可能透過企業內智權工程師或委外顧問公司進行處理,有時必須配合提供相關圖示,這時擁有原始檔的設計師若能了解設計專利圖示的繪圖技巧並提供的話,可節省諸多時間。接下來,就讓我們了解其中的幾項規則:

虛線(broken line)

圖面中使用虛線的部分,代表為不主張設計保護範圍的區域。我們用案例解釋較快理解,首先在 Patentcloud.com 中輸入 USD717314,並查到三星的拍照 app 設計專利,由圖面中看到實線的部分就是主張設計的區域,涵蓋拍照的按鈕以及左上出現類似郵票的空間。這代表著其他如錄影按鈕 、介面中的人物與風景、與介面尺寸大小都不是此專利的範圍。另外,使用虛線的粗細應比主張設計所使用的線條還要更細,以不干擾或越過主張的設計區域為要求。若還是無法清楚了解該設計的話,就必須補充更多能明確表式的圖示了。

陰影

大多於實體產品的圖上才會表現陰影(有些介面設計的專利也會使用,如下圖),表達的方式有兩種(直線與點),用於表示表面的輪廓與特徵。我們可以在同一圖面上混用直線與點畫的陰影,但是不能同時使用於同一表面上。

材質與元件

以美國設計專利為例,它有提供不同元件與材質的畫法,如玻璃需以略淡的實線來表示。不過 Icon & GUI 不會有材質與元件的問題。

動態效果

如果 UI 元件在操作時有互動效果,該怎麼表示其在設計專利上的圖示呢?其實很簡單,把它想像成一段影片,設計師可在時間軸中選擇較具變化或需揭露的設計特徵示意圖若干就行了(類似關鍵影格)!在繪製方式上,當然也適用上述提到的虛線表示法。

3D 物件

沒有特定時間軸來呈現效果的 3D 物件也可以申請設計專利,我們可透過移轉 X、Y 與 Z 軸來提供不同的視圖,以表現不同角度的視覺狀態。

 

看完本篇文章,設計師應可理解專利說明書內的內容,並可透過檢索與閱讀來獲得所需資訊,甚至還能繪製設計專利圖示了!另外,本篇所提到的 Patentcloud,雖為專業的檢索、分析與管理平台,介面卻一點也不複雜,且免費版的功能對非專利領域背景的用戶也綽綽有餘,強烈推薦給有需求的設計師們!

巨匠電腦開設了手機APP設計課程,教你iPhone、Android應用程式開發與應用、使用者介面設計等等,快來巨匠電腦輕鬆學!

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

 

經驗分享*巨匠電腦~感受不錯喔!

分享 ~ 巨匠電腦經驗談~ (Nice!)

巨匠電腦,著實地讓我上了一課!

感謝巨匠電腦,服務態度超級好!