03年3月
最新的Atomic.io更新包含可滾動容器
幾個月前， 我展示瞭如何使用atomic.io來運動原型 。 我在這篇文章中提出的一個關鍵點是“展示動作”，而不是將其留給客戶或團隊的想像力，這一點非常重要。 事實上，這已經變得如此重要，以至於現場出現了全新的UX / UI工具類別。 它們包括 - Apple Keynote，Adobe的Edge Animate，After Effects和UXPin等等。 這個塊上的新手是Atomic.io，當我第一次寫這個產品的時候，它是在公測版本中。
關於開放測試的好處是，他們可以讓軟件製造商有機會收集用戶對功能集的反饋，包括缺少的功能，然後將它們添加到應用程序中，並在商業版發布前進行測試。 在原子的情況下，我真的錯過了一個功能是能夠垂直或水平滾動內容。 這可能包括卡片，幻燈片或實際上用戶在應用程序或網站界面範圍內滑動或拖動的任何內容。
這一定是很多用戶所要求的主題，因為可滾動容器本月才引入到應用程序中，我不得不承認，在原型中創建可滾動內容很簡單，無法啟用。
就是這樣…
02 03
如何在原子中創建垂直滾動內容
您需要先註冊30天的免費試用版，並在該期限結束時向您提供三種定價計劃。
首先你需要知道的是，你將要做的所有工作都是在瀏覽器中進行的，並且該應用程序嚴格針對Google Chrome。 登錄後，您將進入“ 項目”頁面。 要打開該應用，請點擊新建項目按鈕 。
當界面出現時，您會看到工具數量有限，可以將頁面和圖層添加到頁面，美工板以及右側的上下文敏感屬性面板。
在這個例子中，我開始使用iPhone 5的預設為320 x 568。然後打開包含要滾動圖像的文件夾並將它們拖到畫布上。 它們被自動添加到項目中，如果單擊圖層選項卡，則可以看到它們位於單獨的圖層上 。 然後我選擇箭頭工具（選擇），選擇一個圖像並將其拖到一個新位置，以便在它們之間添加一些空間。 然後我選擇了所有的圖像並單擊工具欄上的垂直分佈按鈕 。 這使圖像均勻分佈。
下一步是選擇要滾動的所有內容，並單擊“容器”按鈕或從“組”按鈕中選擇“創建滾動容器”按鈕 。 一旦容器被創建 - 您將在“層”面板中看到它 - 單擊容器並將底部手柄向上拖動到畫布底部 。 點擊屬性面板底部的預覽按鈕 ，這將啟動一個瀏覽器窗口。 使用鼠標的滾輪來滾動內容。 要返回到您的項目， 請單擊瀏覽器窗口右下角的編輯按鈕 。
03年03月
如何在原子中創建水平滾動內容
水平滾動同樣容易完成。
在這種情況下，將一系列圖像拖放到畫布上，並將它們相互對接。 選擇圖像後，我點擊頂部對齊按鈕確保它們全部對齊。
然後，我按住Shift鍵並選擇“圖層”面板中的每個圖層。 選擇圖像後，我單擊Container按鈕 ，然後在“屬性”面板中的“行為”區域中選擇“水平 ”。
然後我通過單擊預覽按鈕在瀏覽器窗口中測試該項目。
儘管我已經展示瞭如何創建垂直和水平滾動的各個版本，但只要將可滾動內容放入容器中，就可以將這些容器放在屏幕的不同區域中。 例如，網頁可以在側面菜單中垂直滾動內容，並在同一頁面上以幻燈片方式水平滾動內容。 事實上，一個容器可以同時具有垂直和水平滾動條目，例如具有十幾個縮略圖的圖像選擇器。
要在atomic.io中了解更多關於此功能的信息，請查看：
- 博客公告
- 滾動容器教程
- 使用容器掩蔽
- 滾動容器疑難解答