app設計

錚／

巨匠電腦讓你變身APP設計高手！一份設計稿支持多個尺寸！

app開發中多種設備尺寸適配問題，過去只屬於Android陣營的頭疼事，只是很多設計師選擇性地忽視android適配問題，只出一套iOS平臺設計稿。隨著蘋果發佈兩種新尺寸的大屏iPhone 6，iOS平臺尺寸適配問題終於還是來了，行動設計全面進入“雜屏”時代。看看下面三款iPhone尺寸和解析度資料就知道螢幕有多雜了。

加上Android生態中紛繁複雜的各種奇葩尺寸，現在APP設計開發必須考慮適配大、中、小三種螢幕。所以如何做到交付一套設計稿解決適配大中小三屏的問題？設計和開發之間採用什麼協作模式？一個基本思路是：

1、選擇一種尺寸作為設計和開發基準；

2、定義一套適配規則，自動適配剩下兩種尺寸；

3、特殊適配效果給出設計效果。

手機淘寶的iPhone 6/iPhone 6 Plus適配版本即將提交App store審核。先曬一下我們採用的協作模式，再慢慢說明原委。

第一步，視覺設計階段，設計師按寬度750px（iPhone 6）做設計稿，除圖片外所有設計項目用向量路徑來做。設計定稿後在750px的設計稿上做標注，輸出標注圖。同時等比放大1.5倍生成寬度1125px的設計稿，在1125px的稿子裡切圖。

第二步，輸出兩個交付物給開發工程師：一個是程式用到的@3x切圖資源，另一個是寬度750px的設計標注圖。

第三步，開發工程師拿到750px標注圖和@3x切圖資源，完成iPhone 6（375pt）的介面開發。此階段不能用固定寬度的方式開發介面，得用自動佈局（auto layout），方便後續適配到其它尺寸。

第四步，適配調試階段，基於iPhone 6的介面效果，分別向上向下調試iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的介面效果。由此完成大中小三屏適配。

為什麼選擇iPhone 6作為基準尺寸？

當面對大中小三種螢幕需要適配的時候，很容易想到先做好一種螢幕，再去適配剩下兩種螢幕。第一個決定是到底以哪種螢幕作為設計和開發的基準尺寸。我們選擇中間尺寸的iPhone 6（750px/375pt）作為基準，基於幾個原因：

1、從中間尺寸向上和向下適配的時候介面調整的幅度最小。375pt下的設計效果適配到414pt和320pt偏差不會太大。假設以414pt為基準做出很優雅的設計，到320pt可能元素之間比例就不是那麼回事了，比如圖片和文字之間視覺比例可能失調。

2、iPhone 6 plus有兩種顯示模式，標準模式解析度為1242×2208，放大模式解析度為1125×2001（即iPhone 6的1.5倍）。可見官方系統裡iPhone 6和iPhone 6 plus解析度之間就存在1.5倍的倍率關係。很多情況下這兩種尺寸可以用1.5倍直接等比適配。

3、1242×2208這個奇葩的數值是蘋果官方都不願意公開宣傳的一個解析度，不便於記憶和計算柵格。640×1136雖然是廣泛應用的一個解析度，但是大屏時代依然以小尺寸為設計基準顯然不合時宜，設計師會停留在小屏的視角做設計。

所以，iPhone6的750×1334是最適合基準尺寸。

只交付一套設計稿，預設用什麼規則來適配？

前文提到適配策略是先選擇iPhone 6作為基準設計尺寸，然後通過一套適配規則自動適配到另外兩種尺寸。這套適配規則總結起來就一句話：文字流式，控制項彈性，圖片等比縮放。

控制項彈性指的是，navigation、cell、bar等適配過程中垂直方向上高度不變；水準方向寬度變化時，通過調整元素間距或元素右對齊的方式實現自我調整。這樣螢幕越大，在垂直方向上可以顯示更多內容，發揮大螢幕的優勢。

按照上述預設適配規則，大中小三種螢幕顯示效果均相同。有時候想在大螢幕顯示更多內容，需要設計出特殊適配效果。比如App store首頁焦點圖，從iPhone 6適配到iPhone 6 plus時焦點圖尺寸和排版做了特殊處理。底下應用列表也從一排3+個變成一排4+個，真正實現了大螢幕顯示更多內容的理念。這些就需要設計師給出相應設計稿。

巨匠電腦開設了手機APP設計課程，教你iPhone、Android應用程式開發與應用、UI使用者介面設計等等，快來巨匠電腦讓你快速上手！

文章與圖片出處: http://youxiputao.tw/articles/3145

 

【手機APP課程】巨匠電腦：使用者介面設計的七個訣竅你知道嗎？

【手機APP課程】巨匠電腦分享，檢視行動裝置的3D人機介面UI開發關鍵

【手機APP課程】巨匠電腦分享科技心理學：讓人成癮的 App 設計學

【手機APP課程】巨匠電腦分享，跨屏介面設計的現況與未來

錚／

巨匠電腦：使用者介面設計的七個訣竅你知道嗎？
近幾年來隨著行動裝置的普及，為了適應多螢幕的瀏覽效果，網頁設計也開始反璞歸真，著重介面設計與使用者體驗，強調良好的設計風格應訴求簡單明瞭，讓用戶也能憑藉著直覺思考，輕鬆應用。然而我們發現，許多設計師往往於「使用者功能提示簡化」及「設計版面簡潔」中陷入兩難，以下七個使用者介面設計的心法，希望帶給設計師們一些靈感。

1. 一目了然
使用者介面設計的主要目的之一，便在於提供精準地導航。 Gmail 在改版之前，其日曆、雲端硬碟、文件以及其它 Google 服務 Icon 皆清楚地放顯眼的導覽列中，不過改版後為了簡化頁面，將這些功能收攏在一個抽象的符號中，導致其客服中心收到大量的抱怨郵件。因此，第一個使用者介面設計訣竅便是，介面上任何一個元素視覺都需具備功能導覽的意義，引導使用者完成所有步驟，否則當用戶迷航後，行銷效果也將大打折扣。

2. 操作優先步驟
一個成功的使用者介面設計，除了體現在視覺之外，引導用戶優先瀏覽 (Preferred Action) 或許才是值得思考之處。新版 Twitter 便出現了讓使用者感到困惑的設計，因為當用戶登入網頁版介面時，發現於行動裝置中可快速找到的「撰寫新推文」的功能框似乎得花一些時間摸索才能找到訊息輸入的欄位。由此說來，第二個使用者介面設計的訣竅便是，當用戶打開操作介面時，就能優先知道該如何進行第一個動作，而非盲目搜尋目標。

3. 關聯脈絡
關聯脈絡的重點在於，使用者所期待的操作介面是可輕易操作並使用的，例如在 LinkedIn  上，我們只要在個人資料欄框內點擊「編輯」後就會出現鉛筆符號，用戶點擊該符號即可快速修訂，這項直覺且關聯的設計，也輔助使用者決定哪些資訊需要重新調整，依照實際需求修改對應資料即可。與之相較，我們常發現許多網站的設計，常造成冗長的修改時間。記得，網路行銷所帶來的後影響之一，就是網友漸漸患有耐心缺乏症，滿足用戶求快、求精準的操作思維，也是「關聯脈絡」這項訣竅所要傳遞的價值。

4. 預設值
依據使用習慣，通常我們不會去修改系統預設值，這也代表了預設值對產品及品牌佔有重要地位。例如現在當我們聽見某串鈴聲，便會知道手機有 Line 訊息，此鈴聲藉由傳播行為，某種意義上就傳遞了 Line 的品牌元素。

5. 引導指示
設計師在進行使用者介面設計時，常犯了一個錯誤，以為用戶都跟聰明，應該都知道操作程序，事實上其結果往往是背道而馳。最好的思考在於，當我們希望使用者遵從設計步驟，便可以置入一些引導指令，方便用戶跟著我們所希望的方向前進，畢竟引導指示做得好，也就間接地找到了成交的方向。

6. 清晰地功能提示與回饋
使用 Google 最便利之處，便是在於防呆設計。例如，當我們使用 Gmail 時，用戶使每執行一個動作時，便會出現淺黃底的提示，像是：「看更多 （learn more） 」以及「復原 （undo） 」等訊息，讓 E 化程度不高的用戶也能輕鬆上手，強化使用意願及黏著度。做好防呆設計，再複雜的功能也無法難倒使用者。

7. 化繁為簡
化繁為簡，其實是相當不容易做好的一件事。冗長的資料表單填寫起來總是令人怨聲載道，但若是能夠藉由設計的思維，在減法原則的輔助下，將資料內容分類，並規劃好填寫的步驟，用戶邊填寫還時還能隨時注意到填寫進度，或是出現一些加油打氣的訊息提示表單填寫即將完成，想必能大幅降低用戶的不耐，也會讓資料填寫這類煩人的操作變得更有人性化，無形中也提昇了用戶對網站的喜好感。

 

設計的良窳在於細節的掌握，希望上述七點要訣分享，可以幫助我們無論是在企劃及實際的設計作業中，都能產出更佳的設計成果之外，也能拿來檢驗我們現有的設計成品中是否需要進行改善的依據。

巨匠電腦也設計了手機APP設計課程，包含應用程式開發、行動裝置UI設計等等，快來巨匠電腦學手機APP設計！

文章與圖片出處: http://blog.wis.com.tw/2014/iris/7-tips-user-interface-design/

 

巨匠電腦告訴你設計App原則 變身超強App設計師

巨匠電腦讓你變身App設計高手！一份設計稿支持多個尺寸！

巨匠電腦分享，醫療感測與APP行動應用整合成未來趨勢

【手機APP課程】巨匠電腦分享，10種不同類型的移動UI設計模式

錚／

巨匠電腦分享，科技心理學：偷師Instagram、Yelp，複製讓人成癮的App設計學。

《TO 導讀》到底受歡迎的 APP 有沒有共同點？讓用戶拿起手機到進入 APP 中到底經過多少步？本文翻譯自知名產品設計人士Jason Hreha的分析文。藉由此文章來探討一個受歡迎的 app 除了功能強大、UIUX 強大、點子強大之外，還需要什麼「調味料」讓用戶能夠死心蹋地的長期使用。本文由中國媒體 36 氪「 友心人 」譯自《Introduction to Behavior-Based Design》，以下為作者第一人稱編譯。
我認為一個能與行為產生交互的產品才能成為好產品。在 Techcrunch 上充斥著很多華麗麗的產品的殘餘，它們曾被當做完美產品來設計。但卻沒能得到真正的用戶認可。這些產品沒能適應，或改變它們用戶的行為模式。

這一點顯而易見。那麼問題來了：為什麼這些產品沒能適應，或改變它們用戶的行為模式？通常來說，當一個行為沒有發生，這意味著以下三點中至少有某一點缺失（或不足）。

1. 動機
2. 能力
3. 觸發

一個行為得以發生，行為者首先需要有進行此行為的動機和操作此行為的能力。接著，如果他們有充足的動機和能力來施行既定行為，他們就會在被誘導 / 觸發時進行。這個簡單的模型叫做福格行為模型。

它以 BJ Fogg（斯坦福說服力科技實驗室主任）命名。我們可以將上述幾個要素一一拆解成分要素來更詳細的說明。但現在，我們先來從宏觀層面上理解一下，以跑步來舉個例子。

比如，你今天下午想去跑步，但卻沒去。為什麼？認真的說，你沒有去跑步有可能因為你感覺自己很棒完全不超重。你沒有狂燃的慾望目標去進行跑步。

這種情況下，行為沒有發生是因為缺少動機。另一種可能，你無法去跑步是因為你昨晚沒有得到充分的休息回到家時已經徹底精疲力竭。這時，行為沒有發生是因為缺少執行它的能力。也有可能因為你正被其他事物纏身而完全忘記了要去跑步。有可能你正深深沉浸在新一季的《紙牌屋》裡。在這種情況下，你的跑步行為沒有施行是因為缺少一個觸發點。

所以，當我們看待一種行為，就像用 Google 搜索一樣，我們需要問問自己問題在哪裡。在大部分的情況下，與這三種要素都有關係。然而，通常會有一個最主要的原因——主要的行為施行障礙需要被界定出來並予以解決。

• 一、觸發

據我自身的經驗來看，困擾大多數 APP 最主要的施行障礙就是使用 APP 觸發點。正如我和 Nir•Eyal 寫的那樣，觸發共有兩種表現形式：1. 內在觸發；2. 外在觸發。

一般來說，當用戶從一個 APP 中不斷獲得好的體驗時，內在的行為觸發點就出現了。在不斷地從 APP 中獲益之後，APP 與用戶想要打開使用 APP 的需求之間就建立起一種聯繫。像 Instagram，用戶的內在觸發點就是「哇，這太美了！我得照下來。」而 Yelp（外國的大眾點評），內在觸發點就是「好餓，有什麼好吃的嗎？」由於內在觸發的形式一般是人們不可控的想法或者內在驅動力，所以開發者想要依靠內在觸發達成 APP 的使用基本是不可能的。所以說，外在的行為觸發才是產品設計者最好的朋友。

以下是外在行為觸發的幾種形式：

1. 郵件
2. 推送
3. 短信
4. 指示

提醒當一個用戶在有行為可能性的時候收到一個電話提醒，那他很有可能會照做的。如果他之後在 APP 的使用過程中收穫了好的體驗，未來他的使用次數就會增多，如此往復，就會形成習慣模式：

行為觸發（通常是外在的）→打開 APP →好的體驗

諸如 Facebook 之類的公司都極大地依賴外在行為觸發點幫助他們的用戶建立使用習慣。

這些刺激的目的就是使得 APP 的用戶能在一天中盡可能多地想起他們的產品，帶來以下幾種效應：

1. 會增大用戶們點擊使用 APP 的可能性。
2. 為我們提供了一種機會使得用戶們在 APP 與日常使用之間建立起聯繫。

試想一下雅虎每天為他們的用戶們推送 5 至 10 條以下的提醒：你有什麼需要嗎？盡情地列在這裡吧。你餓了嗎？這裡有不錯的餐廳推薦哦。想知道明天的氣溫究竟要不要穿夾克？我們有幾種很棒的天氣預報 APP 推薦。

等等…… 我的意思並不是說雅虎一定要採用我的策略，但是這種方法的確可能會擴大 APP 的使用。基於現今智能手機的行為動力模式，人們已經被大量的 APP 淹沒了。你的 APP 只是一部手機中上百個 APP 中的一個，而且它可能並不是你的用戶在這一個星期內最新下載的那個。如果設計者不努力將 APP 不斷地留在用戶的視野範圍內的話，這個 APP 就很有可能被遺忘。

這就是外在行為觸發如此重要的原因所在——他們可以提醒用戶你的 APP 存在並且會幫助解決問題。當你覺得某些行為提醒很煩人的時候，可能你的用戶們並不這麼覺得。由於你自身時刻都在惦念自己的 APP，所以當你收到行為刺激時，你並不會覺得被提醒或對此感到高興。這就是為什麼提醒那些使用自己設計軟件的人總是很難。擴大你的考量範圍才能更好地估量提醒方式的適用性及有效性的最佳方案。

雖然大量的提醒使 APP 的用戶們感到厭煩（並且卸載率會急性上升）的現像是很難避免的。然而，從以上的觀點來看，用戶的使用行為觸發點越多，APP 會越成功（根據行為的觀點分析）。

• 二、能力

如果觸發不是主要的障礙，接下來最該關注的就是能力。如果一個 APP 十分難用，人們就不會使用它。他們會轉而去使用更易用，更簡單的替代物。這都是關於易用性。

在我的經驗中，優化這一要素最好的辦法是做大量的用戶測試（在最開始做非任務型的）。BJ Fogg 將能力分解為六個子成分。我認為它們在我們的工作中不一定特別有用，但在這裡我簡單列舉一下：

1. 時間
2. 金錢
3. 認知要求（精神付出）
4. 物理要求（物理付出）
5. 社會偏差
6. 非常規他依據障礙情況來架構「能力」。

如果一種行為需要大量的時間，那用戶很有可能執行它的能力較低。如果一種行為需要大量的金錢，或是認知上使用起來非常有挑戰性，也會導致執行能力較低，諸如此類。我將時間 / 任務完成比視為這一特徵（能力）的可用性的一個很好的指代。如果一項任務花費的時間很短，它很有可能沒有認知需求和物理需求，或者不會「非常規」。

因此，時間變量有可能是判斷一個 app 及其性能是否可理解、易使用的最佳指標。

• 三、動機

動機在兩個不同的水平上起作用：

1. APP 水平

2. 屏幕水平 APP

水平的動機指的是這個 APP 實現的功能或者解決的問題。舉個例子，比如有家公司邀你使用一個應用，這個應用是用於幫助人們了解當地不同咖啡店裡咖啡水平高低的。結果你被按鍵弄得團團轉，最後笨拙地終於實現了各項功能的便捷使用。但一天的體驗過後你意識到，你根本沒有關心這一款 APP 要解決的問題根本。那麼這個開發過程的動機水平就實在太低了，就算再多的遊戲化和調整都沒辦法掀起人們參與的浪潮。

我們看每一款應用，都需要帶著批判性地去問：
人們真的在乎嗎？它解決的問題究竟是不是人們真實困擾的？
在整個開發的世界裡面，這可能是最少被問到的問題。而且這個問題通常會在團隊對先前的結果進行討論的時候被提及。所以，首先如果一個應用確實解決的是一個人們真實存在的問題（APP 層面的動機），接下來在動機層面還有些什麼？

還有很多方面的內容，但是我們先從激勵機制講起。Dan Ariely 和 Jason Hreh 已經將各種不同的激勵機制劃分成為四大種類：

1. 金錢激勵
2. 有形物質激勵
3. 積分制度激勵
4. 社交激勵

金錢激勵是很直接的，在這裡也就不贅述。有形物質也同樣非常淺顯，而且他們並不適用於我們這裡想要解決的問題，所以我們也跳過。

積分是非金錢導向的，這裡有幾個例子：在視頻遊戲裡面的積分，常客飛行里程，拳擊開始的拳擊數。積分是遊戲化人群的核心策略。他們名義上只能在很短的時間內起作用，但是關於積分其實有很大的學問。在積分設置上體現人類智商低谷的不得不提 Turntable.fm（一個音樂類社交網站和 APP，用戶可以選擇不同主題的大廳用虛擬形象實時播放和收聽音樂、與同房間的人聊天，可以給實時博主點贊，播主從而獲得積分，積分可以用來購買不同的虛擬形象。國內類似的網站有蝦米 loop）

Turntable.fm

蝦米 loop

Turntable.fm 蝦米 loop 這個系統完全依賴積分來體現它的價值定位。這導致它成了個無法解決任何問題，又過於寬泛的「有趣的遊戲」。因此，我所知道的大多數用戶都將它視為一個遊戲：他們只會密集地使用它一段很短的時間，接下來就再也不會碰它了。這個 APP 後來下架了，並且被打上了失敗的標籤。這就是積分系統的本質。它會將引入積分的任何系統變成一個遊戲。而唯一能存活超過數週數月的遊戲，只有生活本身（以及魔獸世界”）。

• 四、社交

最後還有社交激勵。長期來說這是最有力且友好的一個吸引用戶的途徑。我們是社會動物，這是個不爭的事實。在漫長的演化中，我們進化出了推測他人想法，理解社會關係／等級，進而獲得他人幫助（無論同性還是異性）的能力。我們大部分的心理運作的機制都在於知覺社會線索。

這很容易理解：失去了理解他人和獲取幫助的能力，人就很難生存。在能力上表現不好的那些人將很難存活並繁衍，因而缺乏社交能力的特徵也很難表現在後代的基因表達上。因此，我們有著對他人強烈而執著的興趣，以及獲取他人認同的強烈慾望。

任何 app，只要能讓人獲得社會認同和矚目，或能幫助人增加和他人的連接，都會十分引人注意，令人欲罷不能。當然，獎勵系統並不是唯一的提高用戶動機的途徑。另一個激勵用戶參與到我們的 app 中來的途徑是一段設計巧妙讓人愉快的體驗。開發者常（限於時間和預算的約束）忽視那些微小卻能讓人愉悅的調整，而恰恰是這些讓產品變得完全不同。比如，蘋果的郵件系統中，上方那個更新郵件的劃屏小動畫，這個小改動讓陳舊的功能性體驗變得有趣而印象深刻。

一個 app，如果設計優美，有動畫，和給人感覺活潑的點觸，（某種程度上）使用它，以及它本身，就一段很有激勵作用的體驗。在急著做一個了不起的 app 時，我們不能忘記的是，點觸和劃屏能令它用起來更愉悅，就像每一次小的反應都有了呼吸，讓每次觸摸和滑動屏幕都有更好的體驗。

巨匠電腦表示，行動裝置的使用已經成為世界的趨勢，巨匠電腦掌握了這個趨勢，開設了手機App設計的課程，巨匠電腦教你如何設計一個好的程式，快來巨匠電腦輕鬆學！

文章與圖片出處: http://buzzorange.com/techorange/2015/05/18/app-mental/

 

巨匠電腦讓你變身App設計高手！一份設計稿支持多個尺寸！

巨匠電腦告訴你設計App原則 變身超強App設計師

【手機APP設計課程見證】巨匠電腦老師APP達人評價學APP設計，讓人生從此不簡單

巨匠電腦分享，大螢幕iPhone帶來了App設計的三種改變