Axure基礎入門 仿微信發現介面

2022-07-26 17:00:25 字數 1467 閱讀 3256

使用工具:axurepro9 iconfont axhub外掛程式

總結:因為該文章僅限基礎入門,自己僅僅做到介面設計這塊。不談互動,整個流程走下來,有點類似coreldraw(排版)+ ps(圖層) / ai那味,如果有過設計軟體使用經驗的話還是比較快就能上手的。

開啟軟體後新建檔案

從左下角素材區中拖出box2元素

使用吸色管工具取與原素材一致的背景色

將矩形長寬調成原素材一致的大小

從素材庫中拖出h1標籤,與原素材進行對比,調成對應大小。

按住option+shift鍵垂直複製文字框,使得頁面元素保持一致的排版

在底部欄中複製四個文字框,調整好第乙個和第四個文字框的位置,使用工具欄中的水平分布,迅速的調整四個文字框的間距

在大概的布局設定好後,接著調整細節

開啟iconfont來獲取圖示

根據頁面元素來尋找相類似的icon圖示

在對應的圖示下面出現了複製到axure的按鈕

將圖示一次性的複製到畫布上

將圖示放置到固定的位置,這時候一定要組織好相應的元素水平對齊並群組,以免在後續的使用過程當中不小心移動某個元素。

接下來就繼續製作「訊息條數紅點」,拉出button素材,按住小三角調成圓角矩形,具體的長寬及radius可以拉到原素材中對比一下。

因為是button元素,所以支援直接在元素中輸入文字,調成對應的文字大小,吸管顏色,放置對應的icon附近,這個仿介面設計就基本完成了。

由於課排的比較緊,互動操作留著下一周接著寫。

微信小程式仿微信語音

先看一下效果 觸控開始 touchstart function e this.recordermanager.start 觸控結束 touchend function e this.recordermanager.stop console.log 按了 shijian 秒 console.log w...

仿微信發起群聊

做安卓開發也有段時間了,一直看那些大神的部落格,一直在學習。這是第一次寫部落格,請多多指教。廢話不多說,上圖 寫這篇文章主要是記錄一下自己做專案時遇到的一些問題,當時寫這個功能的時候,也是在網上搜尋了不少關於這個功能的文字找資料,但是就沒有乙個符合我需求的。經過我自己的學習整合,總算把這個功能給搞定...

仿微信下滑介面

1.activity布局 android layout width match parent android layout height match parent android background color defaultbackgroundgray android orientation v...