07年1月
Adobe體驗設計技巧，技巧和技巧
當Adobe將Experience Design作為公開預覽版推出時 ，該公司在同一時間完成了兩項相當驚人的成就。 首先，他們在新興的原型軟件市場中佔據了一席之地。 其次，他們為用戶創造了一個機會來玩“進行中的工作”，並讓用戶影響這一進展。 現在應用程序已經可用幾個月了，我認為現在是分享一些體驗設計技巧，技巧和技巧的好時機。
但首先，您可能想知道原型開發軟件的含義。 這個領域的主要參與者包括Proto.io，Principle，UXPin， Atomic.io ，Experience Design和InVision。 與生成靜態設計的Sketch 3，Photoshop和Illustrator等應用程序不同，這些圖形編輯器引入了當今移動和網頁設計領域常見的交互性，運動和其他功能。
隨著移動設備的興起以及對用戶的不可避免的，激光般的關注，設計師不再需要匆匆畫幾張草圖，將幾張圖片放在一起，然後發布項目或將其上傳到Web服務器。 UI / UX工作流已經從根本上改變了事情。 從識別用戶，草圖，線框，模型和原型開始，流程的每一步現在都要經過廣泛的用戶測試。
正是最後階段 - 原型 - 在項目進入最終生產之前，發現並修復了難題。 這是交互性，運動，屏幕轉換和屏幕上所有內容的放置都非常關鍵的地方。 問題和問題不能簡單地表現為靜態圖像或口頭解釋。 畢竟，這些產品是針對真人的。 與其將所有的代碼移動到代碼中，原型設計過程正在越來越多地由專門為此設計的圖形軟件進行。 使用可視化編輯器修復錯誤，替換圖像，重寫一些文本，移動按鈕等操作比不斷重寫和調試代碼更容易。
實際上，該軟件已成為當今“快速原型”設計和開發環境中的關鍵組件。
有了這個說法，讓我們來體驗一下體驗設計。
07年2月
在Adobe體驗設計中創建一個簡單圓圈的目的地引腳
XD的一個很好的方面是使用矢量繪圖工具。 找不到圖標？ 沒問題。 滾動你自己的。 就是這樣：
- 選擇橢圓工具 ，並按下Option / Alt-Shift鍵，繪製一個圓。
- 選擇圓圈後，將填充顏色設置為FF0000 ，並將邊框設置為“無”。
- 雙擊圓圈以顯示定位點。 向下拖動底部的錨點。
- 雙擊所選的錨點並用曲線替換曲線。
- 繪製另一個白色填充小流星，沒有中風。 將其移動到位並選擇銷釘和圓圈。 在“屬性”頂部的“對齊”面板中，單擊“水平中心”按鈕並創建引腳。
03年7月
在Adobe Experience Design中創建背景模糊
在背景圖片上放置文字或其他內容是很常見的。 這裡的問題是圖像，通常會超過它上面的內容。 解決此問題的一種方法是模糊背景圖像。 您可以在Photoshop或其他圖像編輯軟件中模糊圖像，但這樣做效率不高，尤其是因為XD現在可以為您處理此任務。 就是這樣：
- 創建一個新的畫板並添加背景圖像。
- 選擇矩形工具並在圖像上繪製一個矩形。 選擇矩形後，將填充設置為白色，將描邊設置為無。
- 選中矩形後，在屬性面板中選擇背景模糊 。 三個滑塊是模糊量，亮度和不透明度。 以下是他們的工作：
- 模糊量：調整圖像下方圖像的模糊程度。 最大值是+50。
- 亮度：調整圖像中的高光和陰影。 最小值是-50，最大值是+50。
- 不透明度：影響形狀的透明度和形狀下圖像的可見性。 值範圍從0％到100％。
如果您確實想要“切換事物”，請更改形狀的顏色並使用“不透明度”值來改變圖像的“外觀”。
04年7月
在Adobe Experience Design中創建一個Scrim
一個常見的設計問題是界面元素必須是常見的顏色，但是當放置在背景圖像或純色上時會丟失。 解決方案是一種稀鬆平方米。 稀鬆布是在界面元素和背景之間放置的稍微不透明的漸變。 這在XD中很容易完成。 就是這樣：
- 在XD中創建您的畫板，添加圖像，並將相應UI工具包 - 文件>打開UI工具包 ...中的界面元素複製並粘貼到畫板中。 在上圖中，照片使狀態欄和應用欄難以看清。
- 選擇矩形工具並繪製一個矩形。 在屬性面板中選擇填充，然後從顏色選擇器中向下彈出選擇漸變。 將漸變顏色設置為黑色和白色。 將A值 - 不透明度設置為60％ ，將白色A值設置為0％。
- 選擇矩形後， 選擇對象>排列>發送向後 。 界面元素現在可以在圖像上看到。
07年05月
在Adobe Experience Design中創建一個圖像頭像
在聊天應用程序中可以找到常見的設計模式，在這些應用程序中，人們可以互相交談，並且揚聲器的圖片出現在屏幕上 這些頭像通常是被掩蓋的圖像。 在XD中死亡簡單地完成了這一點。 就是這樣：
- 您從美工板上的圖像和圓形或其他形狀開始。 你可以用任何顏色填充圓圈。 你不需要做的是添加筆觸顏色。 它會消失，當你創造的效果，所以為什麼打擾。 如果您確實需要加載該圈子，請將其複製到剪貼板。
- 將圓圈移動到圖像上並選擇圖像和圓圈。 選擇殭屍對像後， 選擇“對象”>“形狀遮罩” 。 當你釋放鼠標時，頭像被創建。 從那裡你可以調整它。
- 如果您需要添加筆觸，請將坐在剪貼板上的圓圈粘貼到畫板上。 選中副本後，請關閉填寫屬性並添加描邊顏色和寬度。 要排列它們，請選擇兩個對象，然後單擊屬性面板頂部的對齊選項中的中心對齊按鈕。
- 如果您想要在面具中移動照片， 請雙擊面具。 這將顯示圖像和掩模形狀。 點擊圖片並拖拽到位。 當您釋放鼠標時，圖像將位於面罩內的新位置。
06年7月
使用Adobe體驗設計畫板
體驗設計美術板不僅僅是為了放置內容。 他們也可以被操縱。 這裡有幾件事你可以做：
- 如果需要美工板的橫向和縱向版本，請複制美工板，並在所選副本中單擊“屬性”面板中的橫向按鈕。 畫板將更改為橫向。 如果Artboard上有內容，請單擊Artboard的名稱，Artboard屬性將出現在屬性面板中。
- 要為Artboard和項目添加自定義顏色，請選擇Artboard並在屬性面板的外觀部分中單擊填充顏色芯片。 輸入該顏色的十六進制值，然後單擊+號。 該顏色將作為自定義顏色添加。 要在其他地方應用該顏色，請選擇一個對象，然後單擊“自定義顏色”芯片以應用顏色。
- 畫板可以垂直滾動。 為此，請選擇畫板，然後在“屬性”面板上或通過向下拖動畫板底部來更改其高度。 在屬性面板的可滾動區域中，從彈出式菜單中選擇垂直並輸入屏幕的視口高度。 藍色的虛線顯示了視口的底部。 要測試它，請點擊“播放”按鈕並滾動。 要關閉滾動，請在“滾動”下拉列表中選擇“無”。
07年7月
在Adobe Experience Design中編輯移動UI工具包
體驗設計包含用於開發iOS，Android和Windows UI的UI工具包。 當你第一次打開它們時，你可能會認為它們設置得很好。 不完全 - 這些工具包中的每個零件都是完全可編輯的。 讓我們通過構建一個Android線框來找出問題。
- 首先選擇Artboard工具並在屬性面板的Google部分中選擇Android Mobile 。
- 選擇文件>打開UI工具包> Google資料 。 這將打開Material Design UI Kit。 選擇放大鏡和選框，然後選擇Screen Guides畫板 。 我喜歡從這一開始，因為它為我提供了適當的屏幕上的界面元素放置指南。 如果你點擊其中一個藍色條，你會看到它被鎖定。 點擊附在他們每個人的鎖來解鎖它 。 選取美工板並將選擇複製到剪貼板。 返回到您的文檔並將屏幕粘貼到您的畫板。
- 在美工板頂部的應用欄上點擊一下。 注意你可以選擇它。 選擇對象>排列>置於前面。 您的選擇現在位於屏幕指南上方。 這應該告訴你，屏幕上的每個元素都可以被編輯。
- 雙擊頂部的狀態欄 ，然後在屬性面板中將填充顏色填充到455A64 。 雙擊應用程序欄並將其填充設置為607D8B。 這應該告訴你UI工具包中的每個元素都可以編輯以符合項目的顏色規範。
- 圖標怎麼樣？ 以下是如何更改顏色。 雙擊心臟以選擇它。 如果你看一下屬性面板，你可能會認為你不能編輯選擇。 不完全的。 再次雙擊心臟 。 打開屬性並將填充顏色更改為FF0000。 對剩下的圖標和文字重複此雙擊雙擊技巧。