案例實(shí)戰(zhàn)！4個(gè)方法幫你零基礎(chǔ)快速完成Apple Watch的項(xiàng)目

當(dāng)設(shè)計(jì)師做一個(gè)從來沒有接觸過的項(xiàng)目，并且項(xiàng)目給你的時(shí)間非常緊急，比如只給你一周兩周的設(shè)計(jì)時(shí)間，這個(gè)時(shí)候應(yīng)該如何應(yīng)對(duì)這種突發(fā)情況呢？今天網(wǎng)易的曾素釵同學(xué)以自己親歷的Apple Watch設(shè)計(jì)項(xiàng)目做案例，給同學(xué)們聊聊如何在零基礎(chǔ)時(shí)快速設(shè)計(jì)一款產(chǎn)品。

這會(huì)可以不用慌張，我們先給自己一天或者半天時(shí)間去了解它，最快捷的辦法是開動(dòng)大家的腦洞，然后再用自己的腦洞想辦法，三個(gè)臭皮匠頂一個(gè)諸葛亮，聯(lián)系你認(rèn)識(shí)的設(shè)計(jì)群體人脈，詢問做過類似項(xiàng)目的設(shè)計(jì)師，最后總會(huì)有驚喜的收獲。記得羅胖講過，在這個(gè)時(shí)代，我們應(yīng)該善于運(yùn)用我的網(wǎng)狀關(guān)系鏈，我就是從朋友那里在短短的一個(gè)小時(shí)之內(nèi)了解了手表項(xiàng)目的大概（雖然人家并不是做的蘋果手表），他大致陳述了一下手表的特性還給我?guī)讉€(gè)手表相關(guān)的網(wǎng)站進(jìn)行瀏覽。給我的網(wǎng)站可以推薦給你們，這里當(dāng)然包括蘋果官網(wǎng)，你可以在蘋果官網(wǎng)上看到成熟的上線產(chǎn)品的模樣，另外一個(gè)網(wǎng)站相對(duì)概念，可以參考一些簡(jiǎn)單的操作動(dòng)效。

1. http://www.apple.com/Watch/apps/
2. http://watchaware.com/watch-apps

面對(duì)一個(gè)不熟悉的產(chǎn)品產(chǎn)品我們可以從產(chǎn)品的規(guī)范還有簡(jiǎn)單了解它的交互結(jié)構(gòu)開始。

1、規(guī)范

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

字體：蘋果手表用的是默認(rèn)的洛杉磯字體。

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

首先是找到蘋果手表的規(guī)范圖，這個(gè)圖看似很難懂，但是沒有關(guān)系，在實(shí)際操作遇到了問題以后，這些規(guī)范圖的解讀就迎刃而解了。不明白的時(shí)候可以多問前端這些圖是怎么解讀的。

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

以下是上圖適用的規(guī)范結(jié)構(gòu)……因?yàn)橐?guī)范的限制，像設(shè)計(jì)師鐘愛的這類能高表現(xiàn)的進(jìn)度條樣式可能就要放棄了，具體情況還是根據(jù)不同產(chǎn)品的內(nèi)容特性來定，蘋果手表能常見進(jìn)度條樣式的主要還是出現(xiàn)在運(yùn)動(dòng)類，健康類APP為主。

白色為文字區(qū)塊，紅色區(qū)域可以放圖片類的素材，基本分為上下結(jié)構(gòu)，設(shè)計(jì)的時(shí)候找到適合你設(shè)計(jì)的結(jié)構(gòu)圖按照規(guī)范設(shè)計(jì)就可以了。

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

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

作為蘋果手表的特性，我們盡量少用色塊或者圖片來局限你的界面大小，因?yàn)槭直沓斯潭ǖ脑O(shè)計(jì)大小以外，它的外部還包含著黑色，只要不運(yùn)用局限性塊面來局限它，這些外部的黑色背景就自然而然的融入到你的畫面當(dāng)中，這樣看起來你的界面會(huì)顯得更延展更大氣……

再次強(qiáng)調(diào)蘋果手表是黑色背景，在用色技巧這塊，大多數(shù)APP會(huì)運(yùn)用高飽和鮮亮的顏色，這樣不僅僅視覺上好看，并且用戶在遠(yuǎn)距離的情況下也能看清楚屏幕上的內(nèi)容，以下是部分APP的視覺截圖……

2、簡(jiǎn)單的交互動(dòng)作

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

APP：就是我們手機(jī)端的首頁，它可以通過手表的首頁圖標(biāo)點(diǎn)擊進(jìn)入，也可以通過notification點(diǎn)擊進(jìn)入。

notification：是一種提醒功能，比如我的飛機(jī)過幾天要起飛了，它會(huì)出現(xiàn)在notification里面，并且各個(gè)APP的提醒是平行的，向左滑動(dòng)可以瀏覽到所有重要的提醒。

glance：它算是一種緊急的推送，如我的飛機(jī)還有一個(gè)小時(shí)就起飛了，它會(huì)彈出在頁面，點(diǎn)擊它就能看見內(nèi)容詳情。

3、如何和前端高效合作

由于iPhone Watch的界面較少，因?yàn)樗闹饕δ苓€是作為提醒的作用，它的頁面不會(huì)像手機(jī)端出現(xiàn)那么多界面。所以提供給大家一個(gè)個(gè)人覺得非常高效的開發(fā)手段，等前端把所有結(jié)構(gòu)都做出來進(jìn)入視覺調(diào)整的時(shí)候，你可以花一到兩個(gè)晚上陪他加班進(jìn)行視覺調(diào)整和適配，要是你還是個(gè)可愛顏值高的妹子這個(gè)事情會(huì)更加順利，你可以在前端身邊運(yùn)用你的像素眼來目測(cè)調(diào)節(jié)內(nèi)容的排布，這樣比前端按你的標(biāo)注來做要高效幾倍，畢竟能省去他發(fā)給你有差距的圖，你來回和他溝通的時(shí)間。一氣呵成，前端也會(huì)非常樂意。

適配的技巧還是先調(diào)整小界面再適配大界面。要是有時(shí)間的話，單獨(dú)開發(fā)尺寸比適配尺寸做出來要更精細(xì)一些，但是會(huì)加大開發(fā)的工作量……

如果你不是顏值高的可愛萌妹子，建議自學(xué)：前端開發(fā)零基礎(chǔ)訓(xùn)練營

4、全局思考

設(shè)計(jì)前最好把交互稿牢記于心，對(duì)全局有個(gè)把控性，優(yōu)先做幾個(gè)重要的界面進(jìn)行風(fēng)格設(shè)定，然后再進(jìn)行顏色，字體，控件的整體統(tǒng)一，建議設(shè)計(jì)的過程中自己整理一下交互稿，可以畫一個(gè)流程圖。這樣可以避免風(fēng)格不統(tǒng)一的問題出現(xiàn)……

作者微信公眾號(hào)：

【為了這8個(gè)指南也得存書簽！】

1. 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識(shí)學(xué)起來！為設(shè)計(jì)師量身打造的DPI指南》
8. 交互設(shè)計(jì)自學(xué)路徑圖：《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量106萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com