藍湖 Lanhu

體驗後覺得是一套不錯的協作平台,可做PM、設計、工程開發上溝通使用,Lanhu 也支援 Sketch 官方版本、iOS/Android編碼樣式產生、互動原型等功能,整體來說像是 Zeplin 與 Invision 的小合體。

Lanhu APP

官方並沒有說明“免費使用“的範圍到哪裡,目前操作上也未受限制,註冊僅需提供信箱即可。本機安裝軟體後直接編輯,使用網頁編輯也蠻流暢的;手機則偏弱勢,安裝APP後可操作,只有預覽功能。

【 匯入 Sketch 】

上傳 Sketch 檔案

需安裝 Sketch 套件,操作方式與 Zeplin 相似,上傳時提供“解析圖層”、“產生尺寸標註”進度,上傳速度也差不多,差別在於 Lanhu 需要重新輸入帳密與選擇專案資料夾。

  • 上傳前優先分類尺寸與裝置,可指定遠端資料夾更新。
  • 測試建立數個專案資料夾,並沒有限制,也可與他人共同編輯;企業版則需付費,重要區別在於獨立伺服器、資料備份與後台管理。
專案資料夾內畫面,可預覽所有頁面

介面操作方式幾乎完全仿照 Sketch,匯入後統一放置於“未分組”資料夾,需再自行分類。提供全畫面預覽,可自由拖曳、直接標註說明,分類資料夾之後的層級畫面、操作回饋效果極佳。

  • 排列方式可依循 Sketch,更新頁面後比對也方便。
  • 選擇分類資料夾,畫面使用灰底示意,可隨意拖曳、編輯頁面,可加入說明註解,若熟悉 Sketch 操作,Lanhu 就上手容易。

【 產品、設計視窗 】

產品視窗與資源庫

Lanhu 針對專案主要提供兩大功能,“產品”ˋ視窗可上傳框架圖、專案相關說明文件,統一管理所有檔案;資源庫可做即時任務時使用,在“產品”與“設計”視窗中隨時可開啟。

設計視窗

“設計”視窗可繪製頁面動線,與標註說明,還可利用重疊功能切換頁面。

  • 如漢堡選單頁有數種狀態時,可重疊多張頁面,於該頁面右側按鈕切換其他狀態頁,在預覽整體動線圖可增加畫面整潔度。
  • 可自由拖曳頁面位置,連結動線已鎖定指定頁面,會自動調整。
圖左:頁面元件資訊;圖右:註解說明

進入詳情頁面,基礎操作模式也與 Zeplin 相似,切圖設定提供更細節的選項,如指定下載某一個裝置、尺寸、哪一種類的圖檔(上圖左);註解可為互動模式,作為解決問題點的說明,可點選“標為已讀”來完成工作(上圖右)。

圖左:iOS 編碼;圖右:Android 編碼

點選頁面元件,於右側欄位顯示詳細資訊,令人驚艷的是 Lanhu 還提供樣式編碼,分別針對 iOS 與 Android 所使用的格式,雖然編碼無法完整匯出,但可直接複製取用所需段落,已是大大加分。

原型模擬

詳情頁面工具,可簡易完成互動原型,算是 Lanhu 添加的小功能。

  • 直覺標示目前頁面與連結關係,隨時預覽原型,缺點是沒有過場效果可添加。
  • 套用分類資料夾,清楚辨識頁面連結的層級。

編碼測試

編寫漢堡選單模擬結果

以漢堡選單詳情頁面內的編碼,測試直接複製貼入 Android studio 編寫環境;Lanhu 僅提供兩種類型的局部編碼,分別是 <TextView> 與 <item>,整體框架佈局還是得自行排版。

  • <TextView> 編碼可全數使用,文字樣式應用時可節省一些時間。
  • <item> 編碼則須視情況使用,該標籤屬於“被引用”用途,會額外新增一份 .xml 文件,適合用於共同樣式;Lanhu 提供 <item> 的寬、高可當作參考,並無實際應用成效。