apple-watch-4-method-1

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

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

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

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

1、規范

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

字體:蘋果手表用的是默認的洛杉磯字體。

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

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

10wy20151203

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

9wy20151203

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

8wy20151203

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

7wy20151203

6wy20151203

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

5wy20151203

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

4wy20151203

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

3wy20151203

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

2wy20151203

2、簡單的交互動作

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

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

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

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

3、如何和前端高效合作

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

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

如果你不是顏值高的可愛萌妹子,建議自學:前端開發零基礎訓練營

4、全局思考

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

1wy20151203

作者微信公眾號:

qr20141023

【為了這8個指南也得存書簽!】

  1. 平面設計:《超贊!設計師完全自學指南》
  2. 交互設計:《交互設計師修煉指南!教你從零開始成為優秀交互設計師》
  3. UI設計:《超實用新手指南!零基礎如何自學UI設計?》
  4. 前端開發:《天貓高手來教你!零基礎如何系統地學習前端開發?》
  5. 摳圖技巧:《從菜鳥到高手!PHOTOSHOP摳圖全方位攻略》
  6. 配色方案:《色彩搭配速成!3個實用方法幫你全面搞定配色》
  7. DPI指南:《基礎知識學起來!為設計師量身打造的DPI指南》
  8. 交互設計自學路徑圖:《零基礎入門!給非科班生的自學路徑圖之交互設計篇》

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量106萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏