本次作業為根據TIM登錄界面截圖,畫出一副一樣的原型。
以TIM登錄界面為例。
一、分析
當我們手裡僅有這一張截圖時,怎樣利用Axure做出和截圖一樣的原形界面呢?
首先,我們要獲取到每個元件的長、寬、高、以及對應的X軸,Y軸信息
其次,我們也要知道各個元件中使用的顏色
分析截圖,我們將此登錄界面分為兩部分,上半部為”LOGO”部,下半部分為”登錄”部。
二、UI設計步驟
將截圖放在工作區,將X軸,Y軸設置為0,0.
1.標記”LOGO”部的元件位置。如下:
移動圖片到右邊,在標記區域中添加元件。
1.1:背景區域:兩個直角三角形,一個等邊三角形(取色就使用拾色器取色)
1.2:LOGO,應用名稱位置:根據標記線,添加LOGO,應用名稱,(為什麼右圖的LOGO看起來是正方形,而左圖為矩形呢?因為右圖的LOGO下有一勾,在標記時也要將此勾作為一個整體標記。)
2.標記”登錄”部的元件位置。如下:
移動圖片到右邊,在標記區域中添加元件。由於登錄部分元件比較多,我們需要分別拆開來看。
- 頭像:圓形,位於左邊據X軸41px,周長81px;
- 在線標記:圓形,位於左邊據X軸101px,周長12px;
- 用戶名、密碼輸入框 :文本框,位於左邊據X軸133px,寬196px,高28px;
- 所有的icon:均為寬26px,高26px;
- 登錄按鈕:按鈕(矩形),與用戶名、密碼輸入框左右對齊,高31px;
好了,記下以上的信息之後,有了標記線,就可以基本準確的畫出原形圖了,如下:
三、原型交互步驟
有了以上的原形,我們做一個簡單的交互。交互需求:用戶點擊“登錄”,跳轉到正在登陸界面,正在登陸界面如下:
這樣看,這個交互就簡單了,我們只需要將登陸界面轉換為“動態面板”,點擊登陸時,顯示State2(正在登陸界面)即可。為了再複雜一點,我們設置用戶名為“1234”,密碼為“1234”,如下:
F5預覽,即可
備註:大家可以根據自己的需要,添加各種用例以備後續使用。
題圖來自 Unsplash ,基於 CC0 協議
閱讀更多 人人都是產品經理 的文章