交互章魚鬧鐘主題設計

設計iOS移動端適配規(guī) 必須按尺寸規(guī)范輸出，@2x和@3x目 2. 3x規(guī)范： 6Plus為例，尺寸1242px＊2208px詳細解 章魚鬧鐘Card （鬧鐘card有自己的規(guī)范，詳情見《章魚鬧鐘card規(guī)范》頁面A（無鬧鐘card）

頁面A（無鬧鐘

點擊右上角按鈕進入此鬧鐘編輯頁面A（有鬧鐘

隨機選中默認／用戶設置好的鬧鐘card頁面 頁面 iOS移動端適配規(guī) （640x1136） 6Plus（1242x2208 6Plus之間的關(guān)系是1.5@2x @3x3x規(guī)范1242px＊2208px6Plus 尺寸設計必須要在696px＊696px1242px

2208px2208px頁面A（無鬧鐘card） 頁面A鬧鐘card滑動效 頁面A69 210px69 210px69567px75px567px75pxb1242px

1242px

168px

72px尺寸：設計師自定義背景567px162px210px尺寸：設計師自定義背景567px162px210px設計師可設計的透明區(qū)域尺寸：1242px＊162px，形式不限

90px90px設計師設計時間小時文字的大小在168px＊210px內(nèi)，分鐘尺寸大小在72px＊90px時間表達樣式不限，需要0-9數(shù)字全部設計出來

502px75px75px

圖示

圖示設計師可設計日期的背景圖樣式，尺寸大小高度在75px內(nèi)，

138px圖示

圖示

138px138px

圖示1242px

此背景 （card后的背景）設計師可自行設計尺寸：1242px＊2208px，背景也可以是純色

設計師可設計添加功能按鈕，大小需在138px＊138px內(nèi)，章魚鬧鐘頁面A（首頁 尺寸：1242px＊567px，背景 圖示b部分設計師可設計的透明區(qū)域尺寸：1242px＊162px，形式不限圖示c部分設計師可設計日期的背景圖樣式，尺寸大小高度在75px內(nèi)，長度可隨日期的變換自動拉伸，圖示d168px＊210px內(nèi)，分鐘尺寸大小在72px＊90px時間表達樣式不限，但是每個都需要0-9數(shù)字全部設計出來圖示e部分設計師可設計添加功能按鈕，大小需在138px138px內(nèi)，表達樣式不限，但需要其他界面上與其同級的按鈕card后的背景 設計師也可以自行設計，背景尺寸為：（w)1242px＊(h)2208px，背景也可以是純色， 頁面

138px

270px

270px138px156px156px138px156px156px 圖示設計師可設計“返回”“關(guān)閉”功能按鈕，大小需在138px＊138px內(nèi)，

圖示270px

270px2208px2208px

156px 156px156px156px270px156px156px

1170px156px1170px156px

156px156px156px270px156px

1242px 尺寸：1242px＊2208px

圖示此按鈕區(qū)域顯示的文字不需要設計，設計師只需設計按鈕的樣式和兩種狀態(tài)，及常態(tài)和選中后的 此按鈕可橫向拉伸，拉伸最大尺寸為1170px＊156px，按鈕樣式可自由設計

章魚鬧鐘頁面圖示a部分設計師可設計“返回”“關(guān)閉”功能按鈕，大小需在138px138px內(nèi)，表達樣式不限，圖示b部分的按鈕區(qū)域顯示的文字不需要設計，設計師只需設計按鈕的樣式和兩種狀態(tài)，及常態(tài)和選中后的 此按鈕可橫向拉伸，拉伸最大尺寸為1170px＊156px，按鈕樣式可自由設計，圖示b中的文字與數(shù)字設計師不可設圖示c部分按鈕的設計規(guī)范同圖示b按鈕的要求，兩種狀態(tài)，常態(tài)和 狀態(tài)，可以橫向拉伸，原始尺寸270px*156px，最大拉伸尺寸1168px＊156px，形式不限，設計師可自由設計，圖示c中的文字設計師不可設計 ，也可以是純色，但需要設計師給出色值號，尺寸：1242px＊2208px頁面C效果圖頁面 頁面C效頁面C標注圖a

頁面 b138px138px 138px圖示設計師可設計“返回”功能按鈕，大小需在138px＊138px內(nèi)，2208px2208px 尺寸：1242px＊2208px圖示1242px章魚鬧鐘頁面圖示a部分設計師可設計“返回”功能按鈕，大小需在138px138px內(nèi)，表達樣式不限，但需要界面A,界面B上與其同級的按鈕“添加”“關(guān)閉”與之統(tǒng)一圖示b部分此背景 尺寸：1242px＊2208px 備注：所有命名都需英文，不可出現(xiàn)中文，格式 1242px＊2208px6Plus鬧鐘Card效果圖頁面A中Card樣 頁面B中Card樣 頁面C中Card樣 頁面B中Card樣鬧鐘Card鬧鐘Card1開啟狀態(tài)鬧鐘Card1關(guān)閉狀態(tài)

鬧鐘Card2鬧鐘Card2鬧鐘示例Card1

鬧鐘Card

需設計0-9十個數(shù)字，

1242鬧鐘Card整體形式設計師可1242

和狀態(tài)，設計師可在給出尺寸范圍內(nèi)設計按鈕的樣式鬧鐘Card3個功能按鈕的樣式設計師可自行設置其樣式 207

鬧鐘Card按鈕上的“設置”“刪除”“關(guān)閉”文字，鬧鐘Card設計師可設計區(qū)域范 card角色頭像切圖大小是246px＊246px圓形內(nèi)，246px

246pxcard角色人物頭像是根據(jù)card的主角來做的，246pxcard的名稱鬧鐘Card一個鬧鐘card的切圖，需要放在一個文件夾中，命名必須為英文，如 名為card－位置－狀態(tài)－test@3x.png鬧鐘Card1切圖與命名示例

1242 1242

鬧鐘Card一個鬧鐘card的切圖，需要放在一個文件夾中，命名必須為英文，如 名為card－位置－狀態(tài)－test@3x.png

鬧鐘Card1切圖與命名示例