一、為什么做「他山石」？

自界面設計誕生的20年間，設計還原度不高的問題一直困擾著設計師們。設計稿高大上，還原出來卻面目全非。解決界面還原問題一直是不斷考驗設計師和開發(fā)們眼力和耐心的過程。終于我們的設計師使出洪荒之力，親自操刀設計了「他山石」APP 來解決這個問題。

二、什么是「他山石」？

「他山石」是一款 Android 端的視覺還原走查工具，可以通過以下視頻了解基本功能。

視頻鏈接：https://v.qq.com/x/page/b1332079111.html

三、對于走查，設計、技術兩種思維的差異是什么？

表象的問題是：界面還原度不高，技術思維對同一件事情的解析和出發(fā)點不同，導致對同一個問題的不同看法。

技術思維的特性：解耦思維，降低耦合度、代碼復雜度，提升代碼獨立運行能力。

設計思維的特性：本質性思維，通過一系列的問題剝開層層表象，直達問題本質。

四、技術思維的思考過程

底層、框架、代碼、界面分離以降低耦合度，保持相互獨立以降低代碼的復雜度和良好的運行能力。所謂的視覺是 MVC（Modeler、Viewer、Controller）中 View 視覺控件中的一系列的界面參數，技術關注具體的參數相差多少，然后具體調整多少參數。對于類似這樣的話「你只要告訴相差多少，加大幾號字體，什么顏色值就好」你一定不陌生。

五、設計思維的思考過程

設計思維的本質性思維就是通過一系列的提問，找到解決問題的關鍵點。

1. 我們要解決的問題是什么？

走查還原問題。

2. 走查的本質是什么？

對比兩個界面之間的差異

3. 他們都怎么對比？

• 設計：專業(yè)像素眼、PS、Sketch 等圖形軟件
• 開發(fā)：憑直覺、MarkMan 等標注類軟件
• 產品：憑直覺、不做具體走查工作

4. 開發(fā)為什么對比得沒有設計好？

• 對界面的專業(yè)度不一樣，設計師對細節(jié)更敏感，像素眼可以看出差異點，對專業(yè)圖形軟件掌握熟練，可以進行更多細節(jié)的對比。
• 開發(fā)對界面敏感度不高，專業(yè)工具掌握不好。

5. 思維方式可快速復制給開發(fā)？

設計走查的思維和方式是被驗證有效、且一直在設計側實行的有效解決方案之一，證明該方式已經具備一定的可行性。

6. 有無更好的解決方案？

在此基礎上，是否有更方便更高效的走查方式，比如智能界面檢測對比？我們也就在這個方向的可行性上做了一輪預研，Android 手機端的布局信息和 Sketch 的布局信息完全不一樣，如果要統(tǒng)一設計和開發(fā)的布局框架信息，對執(zhí)行標準要求非常嚴格，最后我們放棄了智能檢測對比的方案，出發(fā)點是如果不能給出有意義的檢測結果和建議，那么對于走查并沒有根本上的幫助。但我們在會努力在 PC 端去嘗試更智能的檢測方式。

7. 什么樣的工具可以解決這個問題？

想像一下如果有一款手機端的走查工具，無論你在工位、會議室、外出、家中，都可以隨時隨地完成走查，那會怎么樣？

六、能隨時隨地完成走查的「他山石」

它針對 Android 移動端的特性，使用懸浮窗菜單的方式，可以在任何界面上方呼出工具欄，通過導入設計稿后，將設計稿覆蓋在界面上方，進行詳細對比，具體功能一覽見下圖：

1. 產品定位及功能

確定產品定位

• 走查場景：隨時隨地，工位、會議室、外出等。
• 目標人群：產品、開發(fā)、設計、測試等。
• 產品定位：一款簡單好用的走查利器。

根據走查場景和目標人群，我們希望這個工具是個快速、簡單的走查工具，以滿足不同角色，可以上手簡單、隨時隨地快速完成走查。

確定產品功能

走查主要內容有以下5個方面，「他山石」主要功能包括前4個，這樣可以在人力投入有限的基礎上，覆蓋絕大部分的走查工作。

• 位置
• 間距（文字行高、段落間距、元素模塊間距）
• 大小
• 顏色
• 其他（字體、動效等）

2. 同類產品分析

MarkMan

一款 PC 端標注工具，包括了大小測量、間距測量、取色、說明文字等主要功能。

• 位置測量：點擊界面出現該點的坐標。
• 大小測量：選擇矩形工具后，框出目標元素的區(qū)域來查看寬高。
• 間距測量：選擇測量工具后，選擇測量的起始點和結束點來查看間距。
• 取色：選擇取色工具后，點擊界面可以查看相應位置的顏色值（取色時沒有放大局部）。

Photoshop

一款強大的專業(yè)圖形軟件，設計師在走查中會利用到它的部分功能。

• 位置測量：選中目標圖層后，通過屬性面板查看。
• 大小測量：使用選擇框或者屬性面板測量大小。
• 間距測量：按住 cmd（Mac）或 control（PC）鍵再通過鼠標移動到目標元素上查看間距。
• 取色：選擇取色工具后，點擊界面可以查看相應位置的顏色值（取色時放大局部）。

Sketch

一款專業(yè)界面設計軟件，功能更精簡，運行更快更輕便，使用 Sketch 走查個人用的很少，因為有時要操作還原界面圖片，用 PS 會更符合我的個人習慣。

• 位置測量：選中目標圖層后，通過屬性面板查看。
• 大小測量：選中目標圖層后，通過屬性面板查看。
• 間距測量：按住 cmd（Mac）或 control（PC）鍵再通過鼠標移動到目標元素上查看間距。
• 取色：選擇取色工具后，點擊界面可以查看相應位置的顏色值（取色時放大局部）。

3. 主界面展示

懸浮菜單及主要功能

取色功能和網格功能

七、設計反響

目前「他山石」在應用寶內部推行試用，給設計專業(yè)以外的人士，提供了一種簡單快速的方式來完成走查。在合作中收到很多正面的反饋，界面的整體還原度有較明顯的提升，不少開發(fā)同學整體還原度在90%以上，有些相對簡單的頁面100%還原，比如下圖這種常見的卡片還原，是開發(fā)同學自己用「他山石」走查的截圖，一次通過率較高。

根據我們接的運營后臺統(tǒng)計發(fā)現，「他山石」在除了應用寶內部，也被用戶主動傳播，這也給我們更多的信心繼續(xù)完善他山石的體驗。

福利時間-分享試用

他山石現在對外開放，掃一掃即可下載試用，歡迎反饋不斷改進。

歡迎關注「騰訊MXD」的微信公眾號：

圖片素材作者：他山石

「讓設計效果百分百還原」

• 《實用干貨！視覺設計師如何讓設計效果高還原度落地？》
• 《把買家秀變成賣家秀？這四個方法幫你百分百還原UI設計稿！》
• 《實戰(zhàn)五步走！UI設計師如何讓設計稿100％還原？》

================明星欄目推薦================

優(yōu)優(yōu)教程網： UiiiUiii.com 是優(yōu)設旗下優(yōu)質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com