起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：用Axure進行簡單界面設計及交互效果
本次作業為根據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預覽，即可
備注：大家可以根據自己的需要，添加各種用例以備后續使用。
歡迎大家下載原形鏈接：https://pan.baidu.com/s/1YtyC0q0-pr3V3w8cKg2apA 密碼：zvtm
本文由 @小甜甜不甜 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議
這叫什么交互設計？
感覺沒啥價值高的內容。動態面板對于新手比較難，建議這一塊詳細講講就好了。