Fork me on GitHub

墨刀公測&設計大賽參賽作品-仿蘋果官網教程

首先感謝墨刀平臺組織的本次活動,雖然沒拿大獎,但是通過這次活動發現了墨刀一些令人驚喜的功能,比如獲得一等獎獲得者做的一個完整版游戲,只能說屌,大致看了其它一些參賽選手做的原型,仔細對比之后發現,感覺他們做的是高保真,我做的才是原型(手動捂臉);總之,這次參賽還是收獲頗多的。

整體思路

先看下我做了個啥,見下圖:

opus_synthesis

作品地址:點擊查看
蘋果官網:www.apple.com

為啥要做這個?也是臨時想到的,當時墨刀官方發布了一個AirPods的獎品,我就靈機一動,決定要不仿個蘋果官網的交互吧,畢竟蘋果官網的交互還是很簡潔大氣的,于是乎我就開始仿蘋果官網的交互了。

通過觀察,決定選取以下5種交互動效來效仿,這些效果也是我們平時設計原型時經常用到的效果:

  • 漢堡菜單;
  • 載入之后的通知欄自動變色;
  • 輪播圖;
  • 通過顏色切換表帶顏色;
  • 切換選中;

詳細設計

通知欄載入變色

效果預覽

首頁載入變色

設計思路

通過觀察我們可以發現,頂部藍色的一個通知欄在進入的時候是藍底白字,經過2秒之后漸變成了灰底黑字。交互流程如下:

藍底黑字 ——>等待1S ——> 切換成灰底黑字。

設計詳解

  • 新建一個母版,并在其中新建兩個狀態,一個是白底藍字,一個是灰底黑字。

-w1151

  • 在狀態1設置定時器事件,等待1S之后自動切換為狀態2,動效時長2S。

-w1065

-w1131

這樣一個簡單的定時變色的通知欄就做好了。

漢堡菜單折疊與展開

效果預覽

漢堡菜單折疊與展開

設計思路

漢堡菜單的思路與通知的差不多,依然是狀態1是漢堡菜單收起狀態,狀態2是漢堡菜單打開狀態,通過點擊事件來互相切換。

設計詳解

  • 新建母版,并新建兩個狀態,分別是未點擊狀態,點擊展開狀態,見下圖:

-w854

-w875

  • 然后將漢堡菜單的點擊事件跳轉到點擊展開狀態,動效時長2S,同樣的,展開狀態的收起按鈕的點擊事件也跳轉至未點擊狀態,這樣互相跳轉一個漢堡菜單就做好了。

-w1101

-w1135

商品輪播圖

效果預覽

商品圖輪播圖效果

設計思路

輪播圖可能是產品經理日常做原型中遇到的最多的一個場景了。不管是移動端APP還是后臺設計,多少都離不開輪播圖,輪播圖通常又分為2部分,一部分是圖片主體,另一部分是錨點,通過觀察發現,錨點與圖片是一一對應的關系,然后等待2秒之后進入下一張圖片,依次循環。

設計詳解

  • 新建動態組件
-w426
  • 分別在動態組件中新建3個狀態,分別是手表正面,側面,表帶。
-w744
  • 然后給每一個狀態添加全局定時事件,讓每一張圖等待2秒的事件切換到下一張圖,見下圖:

-w1175

都設置好之后一個輪播圖的效果就完成了。

通過顏色切換表帶顏色

效果預覽

切換表帶顏色

設計思路

通過點擊顏色切換按鈕來切換表帶的顏色,每點擊一個顏色,表帶就切換到相應的顏色。

設計詳解

  • 將當前頁面復制4個頁面狀態出來,見下圖,并將每一個頁面中的表帶選中顏色與頁面狀態顏色保持一致,比如第一個頁面是檸檬黃色,第二個頁面是冰洋藍色。見下圖:
-w789 -w753
  • 并將每一個顏色點擊跳轉到相應的頁面,這樣就簡單的實現了通過選中來切換顏色。
-w760

切換選中表盤尺寸

效果預覽

切換選中表殼尺寸

設計思路

在電商產品中經常會有這種切換選中的樣式,就是點擊不同的按鈕切換選中。選中的時候給一個邊框。

設計詳解

  • 新建一個母版,并將兩個按鈕放入其中,其中一個樣式設置為選中樣式,見下圖:
-w771
  • 將另外一個未選中的點擊事件跳轉到另一個狀態,見下圖:
-w752

這樣,按鈕互相切換效果就做好了。

總結

經過這次使用,發現墨刀改進了不少,尤其是狀態這一塊,越來越好用了,我們也可以用狀態來做更多的效果,做起來也非常簡便。

任三胆拖