4個方法幫你零基礎快速完成APPLE WATCH的項目

 　　當設計師做一個從來沒有接觸過的項目，並且項目給你的時間非常緊急，比如只給你一周兩周的設計時間，這個時候應該如何應對這種突發情況呢?今天網易的曾素钗同學以自己親歷的Apple Watch設計項目做案例，給同學們聊聊如何在零基礎時快速設計一款產品。

　　這會可以不用慌張，我們先給自己一天或者半天時間去了解它，最快捷的辦法是開動大家的腦洞，然後再用自己的腦洞想辦法，三個臭皮匠頂一個諸葛亮，聯系你認識的設計群體人脈，詢問做過類似項目的設計師，最後總會有驚喜的收獲。記得羅胖講過，在這個時代，我們應該善於運用我的網狀關系鏈，我就是從朋友那裡在短短的一個小時之內了解了手表項目的大概(雖然人家並不是做的蘋果手表)，他大致陳述了一下手表的特性還給我幾個手表相關的網站進行浏覽。給我的網站可以推薦給你們，這裡當然包括蘋果官網，你可以在蘋果官網上看到成熟的上線產品的模樣，另外一個網站相對概念，可以參考一些簡單的操作動效。

　　http://www.apple.com/Watch/apps/

　　http://watchaware.com/watch-apps

　　面對一個不熟悉的產品產品我們可以從產品的規范還有簡單了解它的交互結構開始。

　　1、規范

　　尺寸：蘋果手表的設計尺寸分為兩個，分別是38mm：272*340 和42mm：312*390像素。

　　字體：蘋果手表用的是默認的洛杉矶字體。

　　字體用色技巧：用鮮亮的顏色，輔助的灰色文字不能太暗，要不會看不清。

　　首先是找到蘋果手表的規范圖，這個圖看似很難懂，但是沒有關系，在實際操作遇到了問題以後，這些規范圖的解讀就迎刃而解了。不明白的時候可以多問前端這些圖是怎麼解讀的。

　　不同的設備都是有不同的屬性，比如網頁端還有手機端就會有不同的限制性，手表的規范限制性很多，比如它在某些頁面是分塊組合的，所以不能用一張完整的背景圖給它做背景填充，以下是我一開始做的設計初稿，我做了一個圓形的進度條……但前端卻告訴我不能實現，原因是進度條太大了，再參考上面的規范圖，原來我的進度條只能放在標紅色的區域內設計，所以進度條要做得很小，但是這樣的話，進度條裡面的關於飛機的到達時間之類的文字信息就沒地方放了，所以我們可以針對這個問題來解讀上面的規范。

　　以下是上圖適用的規范結構……因為規范的限制，像設計師鐘愛的這類能高表現的進度條樣式可能就要放棄了，具體情況還是根據不同產品的內容特性來定，蘋果手表能常見進度條樣式的主要還是出現在運動類，健康類APP為主。

　　白色為文字區塊，紅色區域可以放圖片類的素材，基本分為上下結構，設計的時候找到適合你設計的結構圖按照規范設計就可以了。

　　以下圖片要注意的地方是右上角紅色的區域塊，文字不管如何的排版，你都要給這個區域塊留位置，這是一個固定放loading的地方，文字可以空出這個區域的高度，也可以在末尾端留出一定的位置。

　　下圖是我針對上圖做的效果圖，我直接空了紅色區域的高度來迎合。

　　作為蘋果手表的特性，我們盡量少用色塊或者圖片來局限你的界面大小，因為手表除了固定的設計大小以外，它的外部還包含著黑色，只要不運用局限性塊面來局限它，這些外部的黑色背景就自然而然的融入到你的畫面當中，這樣看起來你的界面會顯得更延展更大氣……

　　再次強調蘋果手表是黑色背景，在用色技巧這塊，大多數APP會運用高飽和鮮亮的顏色，這樣不僅僅視覺上好看，並且用戶在遠距離的情況下也能看清楚屏幕上的內容，以下是部分APP的視覺截圖……

　　2、簡單的交互動作

　　iPhone Watch主要分為三大板塊，分別是APP，notification，glance。

　　APP：就是我們手機端的首頁，它可以通過手表的首頁圖標點擊進入，也可以通過notification點擊進入。

　　notification：是一種提醒功能，比如我的飛機過幾天要起飛了，它會出現在notification裡面，並且各個APP的提醒是平行的，向左滑動可以浏覽到所有重要的提醒。

　　glance：它算是一種緊急的推送，如我的飛機還有一個小時就起飛了，它會彈出在頁面，點擊它就能看見內容詳情。

　　3、如何和前端高效合作

　　由於iPhone Watch的界面較少，因為它的主要功能還是作為提醒的作用，它的頁面不會像手機端出現那麼多界面。所以提供給大家一個個人覺得非常高效的開發手段，等前端把所有結構都做出來進入視覺調整的時候，你可以花一到兩個晚上陪他加班進行視覺調整和適配，要是你還是個可愛顏值高的妹子這個事情會更加順利，你可以在前端身邊運用你的像素眼來目測調節內容的排布，這樣比前端按你的標注來做要高效幾倍，畢竟能省去他發給你有差距的圖，你來回和他溝通的時間。一氣呵成，前端也會非常樂意。

　　適配的技巧還是先調整小界面再適配大界面。要是有時間的話，單獨開發尺寸比適配尺寸做出來要更精細一些，但是會加大開發的工作量……

　　4、全局思考

　　設計前最好把交互稿牢記於心，對全局有個把控性，優先做幾個重要的界面進行風格設定，然後再進行顏色，字體，控件的整體統一，建議設計的過程中自己整理一下交互稿，可以畫一個流程圖。這樣可以避免風格不統一的問題出現……