體驗後覺得是一套不錯的協作平台,可做PM、設計、工程開發上溝通使用,Lanhu 也支援 Sketch 官方版本、iOS/Android編碼樣式產生、互動原型等功能,整體來說像是 Zeplin 與 Invision 的小合體。
Lanhu APP
官方並沒有說明“免費使用“的範圍到哪裡,目前操作上也未受限制,註冊僅需提供信箱即可。本機安裝軟體後直接編輯,使用網頁編輯也蠻流暢的;手機則偏弱勢,安裝APP後可操作,只有預覽功能。
【 匯入 Sketch 】

需安裝 Sketch 套件,操作方式與 Zeplin 相似,上傳時提供“解析圖層”、“產生尺寸標註”進度,上傳速度也差不多,差別在於 Lanhu 需要重新輸入帳密與選擇專案資料夾。
- 上傳前優先分類尺寸與裝置,可指定遠端資料夾更新。
- 測試建立數個專案資料夾,並沒有限制,也可與他人共同編輯;企業版則需付費,重要區別在於獨立伺服器、資料備份與後台管理。
介面操作方式幾乎完全仿照 Sketch,匯入後統一放置於“未分組”資料夾,需再自行分類。提供全畫面預覽,可自由拖曳、直接標註說明,分類資料夾之後的層級畫面、操作回饋效果極佳。
- 排列方式可依循 Sketch,更新頁面後比對也方便。
- 選擇分類資料夾,畫面使用灰底示意,可隨意拖曳、編輯頁面,可加入說明註解,若熟悉 Sketch 操作,Lanhu 就上手容易。
【 產品、設計視窗 】
Lanhu 針對專案主要提供兩大功能,“產品”ˋ視窗可上傳框架圖、專案相關說明文件,統一管理所有檔案;資源庫可做即時任務時使用,在“產品”與“設計”視窗中隨時可開啟。
“設計”視窗可繪製頁面動線,與標註說明,還可利用重疊功能切換頁面。
- 如漢堡選單頁有數種狀態時,可重疊多張頁面,於該頁面右側按鈕切換其他狀態頁,在預覽整體動線圖可增加畫面整潔度。
- 可自由拖曳頁面位置,連結動線已鎖定指定頁面,會自動調整。
進入詳情頁面,基礎操作模式也與 Zeplin 相似,切圖設定提供更細節的選項,如指定下載某一個裝置、尺寸、哪一種類的圖檔(上圖左);註解可為互動模式,作為解決問題點的說明,可點選“標為已讀”來完成工作(上圖右)。
點選頁面元件,於右側欄位顯示詳細資訊,令人驚艷的是 Lanhu 還提供樣式編碼,分別針對 iOS 與 Android 所使用的格式,雖然編碼無法完整匯出,但可直接複製取用所需段落,已是大大加分。

詳情頁面工具,可簡易完成互動原型,算是 Lanhu 添加的小功能。
- 直覺標示目前頁面與連結關係,隨時預覽原型,缺點是沒有過場效果可添加。
- 套用分類資料夾,清楚辨識頁面連結的層級。
編碼測試

以漢堡選單詳情頁面內的編碼,測試直接複製貼入 Android studio 編寫環境;Lanhu 僅提供兩種類型的局部編碼,分別是 <TextView> 與 <item>,整體框架佈局還是得自行排版。
- <TextView> 編碼可全數使用,文字樣式應用時可節省一些時間。
- <item> 編碼則須視情況使用,該標籤屬於“被引用”用途,會額外新增一份 .xml 文件,適合用於共同樣式;Lanhu 提供 <item> 的寬、高可當作參考,並無實際應用成效。