巨匠電腦課程手機app設計相關課程正夯！在智慧型手機普及化的時代，相信大家都知道app設計課程又分為Android、蘋果的ios系統，巨匠電腦便針對者兩大手機系統推出相當豐富完整的巨匠電腦課程規劃，以下便整理了這篇2018年度 巨匠電腦課程 手機app設計類 的開課班表給大家參考參考！
巨匠電腦課程- 2018年手機app設計總整理
標籤: 手機app設計
手機app設計職缺多! 報名巨匠電腦課程學習技能
神評價！介面設計師保護智財 巨匠電腦讓你三分鐘看懂設計專利
錚／
介面設計師保護智財 巨匠電腦讓你三分鐘看懂設計專利
早期，大多數企業並不重視設計專利，認為很容易被迴避。直到 APPLE 對競爭對手發動設計專利訴訟戰，並透過舉證成功的牽制對手後，才逐漸扭轉大家看待 設計專利 的價值觀。然而，專利訴訟在商業戰略上的思考與應用層面，並不是設計師該處理的項目。但由上述的例子來看，設計師所創造出來的設計價值，已跳脫增加產品銷售、改善生活、帶來更好的 UX 等傳統效益（當然這還是很重要，並且是設計師們最關注的）。所以設計師在知識領域的增進，需跨出單純＂做設計＂的小框框；同時也應多關注新聞動態，了解專利對產業的影響。甚至在設計前透過專利檢索，來降低未來產品推出被訴侵權或迴避的機會，也許還能由檢索中得到設計的靈感！不過，大部分的設計師並不會在設計前進行此步驟，原因當然有很多，其中有一大部分是沒有友善的工具，以及對專利知識不足而懼怕或排斥。所以這次大舌頭會以免費好用的工具（Patentcloud.com）與美國設計專利（以 Icon 與 GUI 為主）為素材來分享相關的初階知識。
設計專利的定義
各國專利局對設計專利的定義不同，但基本上就是針對物品的形狀、花紋、色彩、圖案或其結合的應用創作所得到的權利，並與功能完全無關，詳細的法條規定可以看這裡。而我們這次要談到的電腦圖像（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 介面之圖片:
（１２）文件類型：
顯示此文件的類型，如發明專利公開說明書、發明專利公告說明書、設計專利或植物專利等。底下為第一發明人的姓氏。
（１０）專利號：
當已核准專利公告時會取得公告號，美國專利號等同於台灣的公告號，後方會有一字母或字母加上數字的類別碼（kind code）以快速區別專利的類型與狀態，如 S 就是設計專利，其他類別碼的意思可參考官網。
（４５）公告日：
被核准的專利發佈日期。
（５４）專利名稱：
申請人此專利的命名。
（７２）設計發明人：
可看到設計發明人的姓名、居住地與國別。
（７３）專利權受讓人：
享有此專利權利的人或企業。
（２１）申請號：
提出專利時，專利局給的申請號碼。
（２２）申請日：
提出專利申請的日期。
（５１）國際工業設計分類號 LOC：
此為羅卡諾協定之國際工業設計分類方式，提供同盟的會員國使用於官方文件以及和工業設計之註冊登記與延展有關之出版物上，可由此網站查詢其代表的分類為何。
（５２）美國分類號 USPC：
代表設計所屬的美國專利分類類別。
（５８）分類號檢索範圍：
專利審查委員在審查本專利時，檢索過的美國專利分類號。
（５６）引證資料：
Patentcloud.com 將相關資料獨立於＂引證資訊＂頁籤中呈現，並分為向上引證（即此專利參考引證的相關資料），以及向下引證（被哪些專利參考，資料會隨時更新）。
（５７）權利項：
定義專利的保護範圍的部分
（Ａ）說明：
解釋圖示
美國設計專利說明書
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
超厲害！【手機APP課程】巨匠電腦密技：像個設計師一樣設計你的 APP 介面
錚／
巨匠電腦分享，現在透過行動裝置的上網量已經超越桌面電腦，所以行動裝置已經成為一般大眾接受吃訓的主流，那隨著行動裝置的普及，行動裝置的使用者介面與APP的設計也越來越受到重視。
美國在2014年初，透過行動裝置的上網量正式超越了桌面電腦，從此確立了行動裝置取代桌面電腦成為一般大眾接受資訊的主流終端。也因此越來越多的 Start-up 將自己的產品重心放在行動 APP 上面。然而隨著市場上的 APP 數量爆發性成長，如何從眾多的產品中吸引使用者、黏住使用者，使用者經驗設計變成了其中一個很重要的環節。
使用者經驗設計的範疇非常大，包含了解使用者、挖掘使用者潛在動機到易用性、美學等等，通俗點來說，如何讓一個產品給使用者爽的感覺，其中所包含的知識與方法都是所謂使用者經驗設計。
在整個 APP 的設計之中，介面與使用流程是使用者最直接體驗到產品好壞的地方，即便你在前期研究發想，抓住了很棒的價值訴求、問題解決方式，而在 APP 設計上的最後一哩上－－介面與流程給使用者不好的印象，你前面的努力便功虧一簣，由此可以見介面設計的重要性。
這篇文章將會帶大家實地重新設計一個簡單的 APP 介面，從中讓大家熟悉介面設計上的思考方式。整個設計的流程包含：
- ● 框定你的設計範圍
- ● 整理你的資訊架構
- ● 考慮資訊的不同狀態
- ● 考慮資訊的流動性
- ● 發揮你的美感
裡頭我會使用最近給一位朋友的產品－－Phofun 介面上的建議與修改方案為例帶大家思考。
Phofun 是一款讓朋友間彼此販賣創意照片的社群 APP。在裡頭每個人給每張照片定價，並用一句話形容照片後分享給朋友，收到照片的朋友，一開始沒辦法看到照片，只能從這張照片的敘述以及價格，來決定自己要不要使用 APP 內的金幣來實際觀看這張照片，觀看後讓使用者即時回饋評價這張照片。
簡單地說，這是一個藉由窺看慾望以及虛擬經濟為驅動的照片社群，最近 Phofun 想要讓社群從認識的朋友彼此分享擴展為讓不認識的朋友也可以互相分享販賣照片，也就是要建立一個賣場，讓全世界彼此不認識的人，也可以購買觀看互相的照片。
在開發過程中，我朋友他還沒有細想賣場的介面便直接開發了，以下這張圖是當時開發中的介面，看到這張圖以後你會怎麼重新設計它呢？ 
看起來不知道從哪裡下手嗎？
來跟著我一起一步步去整理自己的思緒重新設計它吧！
框定設計範圍
動手設計之前，先問問自己「我可以設計的範圍在哪裡？」，有些專案可以從前期調查開始挖掘需求、有些專案已經定下了商業目標得從互動設計上發揮……，每次設計都要先釐清你這次設計可以發揮的限制在哪裡，避免自己一頭熱最後設計出開發上來不及、無法融入現有產品的產品。
而在這次介面設計案例中，我無法重新定義需求、無法定義使用者與產品的互動方式以及產品設計語言等等，我們能做的是最基礎的介面設計。在這個階段，我們的設計目標是要確保介面表達出適當及適合的資訊，讓使用者清楚理解介面互動的方式。
整理你的資訊架構
在拿起你的鉛筆開始畫介面之前，先思考你的介面上需要呈現什麼資訊。
首先是整理你的產品資訊架構（Information Architecture），也就是在你的產品中裡頭的資訊彼此的關連性、階層關係，進而去設計這些資訊以什麼方式組織呈現給使用者。
在我們的案例中，賣場裡頭賣的是照片，我們需要先思考每一張上架的照片呈現哪些資訊，並且同時思考這些資訊彼此的關係。比如說在照片資訊內，裡頭的賣價與倒數時間是一塊的，可以把它分類出來，方便之後介面上設計。
整理結果如上圖所示，有了他之後我們才能了解到這個介面需要呈現哪些資訊、這些資訊的分類關係。
為什麼要知道這兩點呢？因為了解了需要呈現哪些資訊，你才知道介面上要放什麼資訊；了解了這些資訊的分類關係，你才知道資訊要怎麼放在介面上。
在介面上，我們會傾向會把同類的內容與互動元件放在一起，讓使用者更容易理解元素之間的關係。那為什麼放在一起會讓使用者更容易理解呢？那是因為在原因是在完形心理學裡頭有所謂的接近法則（law of proximity），如果兩個元素緊密地放在一起，人類會將這兩個東西建立關聯，即使是不相似的事物也可能因為距離相近，而在視覺上產生群組效果，比如說下圖左右兩邊都有圓形，但你不會把這兩個圓形當做同一個群組的元素。
考慮資訊的不同狀態
接下來，要考慮介面上資訊的不同狀態，因為 APP 介面並不是一張畫在固定大小紙上的畫，而是可與使用者互動來變化自己部分介面資訊。比如說在我們的案例中，每一張照片有著「我還沒買過」、「我已經買過的狀態」，而評價資訊上則會有「我還沒評價」「我已經評價」的不同狀態。
這些狀態會隨著使用者的互動而變，並且也是需要呈現在介面上讓使用者看見，藉由這些狀態變化的資訊，使用者才能感受到自己與系統正在互動，並且理解自己的操作狀態。
考慮資訊的流動性
除了介面的不同狀態外，介面設計與平面設計的差別還有在於資訊是流動的，也就是介面上的資訊並不是固定長度的，比如說每個人的 ID 名字長度不一樣、照片敘述的長度也不一樣、剩下的倒數時間不一樣、評價數也是不一樣的，而這些不同長度的文字有可能會在畫面上與其他 UI 元素碰撞，比如說底下這個購買介面，當商品名過長時會覆蓋到付款的按鈕。
這個問題有以下三種處理方式：
- ● 限制長度
- 限制長度可以分為輸入限制以及顯示限制，輸入限制是指使用者在輸入資訊時，限制他可以輸入的字元長度；顯示限制則是當資訊長度超過顯示範圍時，則隱藏過長的資訊，最常使用的是截斷資訊後加上刪節號（ellipsis）。
- ● 動態調整大小
- 根據不同的文字長度，在不失可讀性範圍內去動態縮小文字。讓文字根據長度自適應大小。
- ● 動態調整顯示形式
有些資訊有不只一種的表達方式，當資訊過長時可以使用比較簡短的表達方式，比如說 September 換成 Sep.、1200 換成 1.2K、1分30秒換成 90 秒……等等。 
對於介面上要呈現的資訊都思考過以後，你就可以在紙上打草圖或是使用 Axure RP、Balsamiq 等原型工具畫 wireframe。
發揮你的美感
當草圖畫完，檢查確認後沒有問題後，打開你的 Photoshop、Illustrator 或是 Sketch來畫出漂亮的視覺稿吧！
最終的方案中，可以看見我是怎麼將之前整理的資訊表現在介面上：
我把資訊架構中同一族群的元素放在一塊，比如說把價錢與購買倒數時間一塊放在右上角，讓使用者一眼就知道購買相關的資訊。對於介面不同狀態的表現，我讓使用者已經購買的照片背景轉暗，表示對照片已經操作過了；購買資訊（價錢與購買倒數時間）對使用者來說也已經沒有意義了，所以將他隱藏起來換為「已購買」字樣；對照片評價的部份，我運用小花、大便與評論的 icon 顏色來表現使用者有沒有對照片評價，而對於不同長度的資訊，我分別對他們做不同的處理：
- ● 倒數時間：只顯示最高單位的時間，比如說還剩 1 天 20 小時 5 分，只顯示 1 天，理由是在 Phofun 賣場裡，並不像拍賣 喊價應用對時間資訊有這麼高的需求，所以隱藏到對使用者重要度沒這麼高的時間訊息。
- ● 評價數量：運用一千轉為 1K 、一百萬轉為 1M 的方式，限制評價數量所用的字元數在三個以內。
- ● 照片敘述：限制使用者只能輸入 70 字元，並且根據不同長度的字數動態調整文字大小，小於 28 字元字體大小為 16px、 28 ~ 56 字元時字體為 15px 、而大於 56 字元時為 12px。
而最後我評估認為評價資訊中的購買數，對使用者來說並不是一個重要的指標，使用者想了解的是其他人對這張照片的好壞，因此小花數、大便數以及評論數才是對使用者來說重要的元素，因此去除購賣數資訊，並且把可能需要對圖片進行購買、刪除以外的操作，像是檢舉、分享……等可能的操作藏在評價列最右邊的刪節號裡頭，當使用者點下刪節號才會出現更進一步的選單。
開始動手設計你自己的 APP 介面
學習了怎麼設計 APP 介面後，你是不是手癢想趕快設計自己的 APP 了呢？趕快動手開始設計你的APP UI 吧！
設計完以後在底下留言，分享炫耀你所設計的 APP 介面吧！如果設計上遇到了什麼問題，也歡迎在底下留言發問！
Photo Credit： Jeshu John, CC License.
巨匠電腦也有手機APP設計的課程，能讓大家快速學會APP的設計，快來巨匠電腦讓你輕鬆學。
【手機APP課程】巨匠電腦分享，10種不同類型的移動UI設計模式