前言
網購已經不再是現在的時髦，而變成了我們每天的日常生活。上網已經和買買買緊密地聯系在了一起，成為了我們的人生信條。而逛街一詞，越來越多地變成了一種情懷。有時候我們去逛街，要么是為了打發時間，要么是想親手摸摸商品本身，要么就是想看看不同的商品，放在眼前或者在腦海里比較一下。畢竟現在網上琳琅滿目的商品讓人眼花繚亂，一次展示一個，看完這個，忘了上一個；看完了最后一個，已經沒有力氣再打開長長的歷史列表一個一個看回去。如果沒有石猴的火眼金睛，如何萬里挑一，找到自己中意的那個‘它’呢？畢竟我們大多數人，在買自己需要的商品時，往往會因為不同的價格，不同的材質，不同的性能和各種優惠活動而感到頭暈眼花。所以，性價比往往成為了一個商品的優劣的代名詞。如何在無數的商品中，找到樣子喜歡，參數適合，而且性價比高，甚至如果包郵就更好了的的商品呢？還是老話說的好，貨比三家！
關鍵字在於一個“比”，我們怎么比呢？靠腦子？俗話說好記性不如爛筆頭，可是一邊打開 App / 網頁瀏覽，一邊拿紙筆狂寫是不是有點兩邊速度不對等呢？如果 App 本身自帶比較功能，那簡直是不可描述的感受啊！
所以，在鄒老師的大力鼓動和支持下，我們 UWP 版淘寶 App 在不斷追趕其他平台 App 完善功能的同時，獨樹一幟另辟蹊徑，（偷偷地）開發了“商品比較”功能，現在已經進入測試階段，相信不久之后就會和大家見面了。這無疑是在剁手黨躁動的六月添的一把好柴火，剁手黨的春天沒有結束，剁手黨的春天來到了！
比較功能雛形
受到用戶的建議，和鄒老師的鼓動，我們收到了組內第一封關於新功能“比較”的郵件，郵件的標題叫“Innovation for Second Detail Views”，Innovation 這個詞瞬間點燃了筆者那顆不安分的悸動心靈，於是筆者抱着“我不下地獄誰不下地獄”的心情開始了這一次顛簸的創新之旅。
最初，我們對比較功能是這么要求的
“領導說，要有第二窗口，於是有了第二窗口”
--《 UWP 創世紀1:3》
隨后的細節包括：
1） 始終為窄屏模式 2） 最多允許三個（此數量可以配置）商品同時比較 3） 不能下單，只能放入購物車 4） 可以聊天，但是需要啟動獨立旺信 5） 可以刪除 6） 可以看圖文詳情 7） 可以看用戶評價
嗯，說來就是幾行字，背后程序員千行汗啊……單說入口的比較圖標，我們就從字體庫中找尋了四種方案進行比較：
領導一拍大腿，第三個好，就它了。當然我也喜歡第三個，有用放大鏡努力查找兩個東西的不同的感覺。同時入口的名稱正式定為“去比較”。
很快，我們就寫好了比較功能的最初雛形：
看，小時候的“比較”頁面長這樣。就連標題欄都和“媽”的顏色不一樣，有着濃厚的隔壁老“微軟”家主題血統。
這個頁面僅能實現從主窗口加比較進入第二頁面，還有很多bug，隨便點一點就會閃退。頁面詳情也是直接套用的原來的詳情頁面，隨便點擊就有可能無法跳轉回來。同時也沒有刪除比較的功能，而是用的循環替代的方法，滿了就把最早的一個頁面替換掉。
千錘百煉出深山
初版的功能雖然簡陋，但是由於和領導腦中的草圖吻合，所以倒也得到了“看起來還不錯”的好評。同時提出了替換算法的雛形，這個算法，也一直沿用至今：
1）整個窗口商品左對齊，一旦有空位，右邊的商品向左補位 2）用戶可以選擇刪除某個待比較商品 3）一旦滿了，再添加的話用戶決定替換掉哪一個
所以我們再接再厲，對着這個比較頁面又捶打了一陣，給出了第二個可以供內部試用的版本。
在這個版本中，頁面框架和現在基本一致：
顏色也變得像爹媽的顏色了，同時有了中間的分割框。
沒有填滿的空位會提示用戶繼續添加，也提供了跳轉主窗口的按鈕。
商品的添加，刪除也符合剛剛提到的算法。同時我順手應用了一下商品換位的 API，自作主張地添加了一個
按鈕放在兩個商品之間，可以交換相鄰商品，這樣用戶可以任意把原先隔開的商品放在一起比較了。
當商品滿了的時候，繼續添加會彈出窗口問用戶要替換哪一個。之所以我們沒有給用戶“后悔”的選項，即哪個也不想替換的“取消”選項，是考慮到一個對話框三個按鈕已經很多了，畢竟我們程序員也常常面對着一個擁有“Continue”，“Abort”和“Ignore”的窗口一頭霧水，根本不知道改點誰，我要是再加入第四個按鈕，用戶光讀按鈕就得讀半天，大大降低了剁手的效率。
每個單獨的頁面包含以下功能：
a. 圖片
b. 標題+分享 c. 價格信息，各種快遞信息和促銷信息 d. 商品規格選擇（並可添加購物車） e. 商品參數 f. 寶貝評價（可跳轉全部評價並返回） g. 商店信息（只可讀，不可跳轉） h. Bar：內含客服（跳轉獨立旺信）+收藏+移除比較 i. 加入購物車功能
這一功能和之前的需求是吻合的。所以這一版本順利進入內部進行測試。
三胞胎變雙胞胎？
這個版本經過試用后，我們收到了很多有用的反饋和一些 bug 的報告，其中大多是樣式的調整，我就不在這里贅述了。其中有兩個比較有意思的問題：
1. 重復商品提示
2. 子窗口的最小寬度能不能大一些
重復商品提示，一個看似簡單但是實現起來到處都是坑的問題。首先，從不同地方打開的商品傳遞過來的商品 id 這一參數位置各異，例如，主頁打開的商品和收藏夾打開的商品傳遞過來的商品 id 就不一樣，主頁的商品 id 在一個 dictionary 格式內，而收藏夾的 id 就是參數本身。所以都要一一做判斷。最難的還是從三個頁面中找到各自的 id。三個頁面在三個 Frame 中進行導航，而獲取這種 Frame 頁面中的內容是個復雜的問題。不要問我怎么做的，反正很厲害就對了！具體實現還請移步參考這篇滿是干貨的文章：從淘寶 UWP 的新功能 -- 比較頁面來談談 UWP 的窗口多開功能
子窗口的寬度是個我一直沒有解決的問題，因為不管我怎么設定子窗口都不聽話。所以我不得已查閱了官方手冊，發現了一個震驚的事實：
“窗口的最小寬度的最大值是 500 x 500 像素，超過這個尺寸的將會被強制設定到界限內。”（ApplicationView.SetPreferredMinSize | setPreferredMinSize method）
所以不管我怎么努力，窗口的最小尺寸也只能是 500 x 500。可是這個尺寸下，三個商品擠在一起會十分難看。所以領導想了一個終極絕招：殺人！
當然不是殺我，是要把三個比較窗口中的一個殺死，三胞胎變雙胞胎！當然只是在寬度不足的情況下才會這么做，只要窗口夠寬，三兄弟還是可以一起愉快地玩耍的。
別了，三胞胎。
歡迎你們，雙胞胎。
我為雙胞胎設定的門檻是 768 像素，只有大於 768 像素的寬度才能激活三胞胎模式。之所以設定為 768，是因為很多平板的尺寸是 1366 x 768，當他們豎過來使用時，這個寬度對於三欄比較來說有點局促，所以適合雙欄，大於這個寬度的，比較適合三欄比較。
三胞胎與雙胞胎互相轉換，自然會帶來許多問題：
a. 三變二的時候：第三欄怎么辦？刪除？隱藏？添加新的時候是否與他比較是否重復？前兩欄空了他是不是補位？
b. 二變三的時候：原來的第三欄怎么處理？前兩欄有空位怎么辦？
經過不停的試驗和思考，最后的處理方案是：
a. 三變二的時候：整個第三欄隱藏。如第三欄原來有商品，仍保留但不顯示。雙欄添加重復提醒時，第三欄不參與比較是否重復，只比較前兩欄是否有重復。刪除前兩欄的內容，第三欄不會向左補充。也就幾乎等於，第三欄完全隱身。
b. 二變三的時候：若第三欄在消失前有商品內容，則顯示回來。如果此時第一欄或第二欄不滿，則第三欄自動填充過來。
就這樣，我們讓雙胞胎和三胞胎和平共處。
一只紅杏出牆來
至此，比較功能通過內部測試，提交到測試人員那邊去了。我們內部憋出的這朵紅杏，終於可以出牆了。關於這個新功能——商品比較，每個人都有話要說，可能也有問題想問。大家稍安勿躁，靜一靜先，就讓我們來慢慢介紹一下我們商品比較新功能的細節。我們可以和網頁版做個對比，簡單介紹一下我們新出爐的比較功能：
比較的入口
“歡迎，哈利，歡迎來對角巷”
——魯伯·海格在哈利·波特第一次來到對角巷時說道
我們也要歡迎大家來到“比較”功能的入口。對角巷由於魔法界不為人知的秘密，建造的十分幽閉十分難找。但對於我們的新功能來說，可不能這樣。我們先來看看淘寶 Web 頁面比較入口的位置：
是不是很不起眼呢？最可氣的是，點了以后，還要再點一下下圖的“加入對比欄”按鈕，才算是加入了對比功能。
所以我們在 UWP 的淘寶 App 中，特地認真地考慮了這個問題，下定決心要簡化這個步驟，同時讓“比較”的入口醒目！因此大家以輕松的在 App 的詳情頁里找到“比較”功能，而且為了讓更多人看到這一新功能，我們特地將它用淘寶的主題橙色高亮。
UWP:
是不是比網頁版的更加明顯呢？點開商品詳情，就很容易發現。從此再也不用擔心找不到比較按鈕啦！插一句題外話，最早我們是打算為了推廣這個功能，把按鈕放在左數第一個的。但是在實際擺放的過程中和實際使用中發現，放在右邊數第一個點起來更加順手，而且貼近“加入購物車”這個讓無數剁手族心動又心痛的按鈕的話，其實更容易被大家所注意到。所以我們就特地沾了一下“買買買”的光，把比較功能的按鈕放在“加入購物車”旁邊了。
“比較”的比較
有人要問了，淘寶網自己也有比較功能，那 UWP 版的強在哪里呢？
我們先來看一下網頁版的比較內容：
可以看到，網頁版的比較內容都是一些非常通用的商品屬性，例如價格，郵費，評價，店家信息等。但是唯獨缺少了用戶最最需要的“商品參數”和“用戶詳細評價”。作為“死理性派”，我可不會去相信商家天花亂墜的說辭，我更相信冰冷的參數背后的殘酷的真實，所以如果沒有商品參數，我怎么能了解我買到的商品呢？而用戶評價更是建立用戶與商家之間信任的最關鍵的紐帶（即使很多商家喜歡買水軍來刷評論）。所以為了彌補這些缺點，如前文所說，我們的比較頁面擁有這些內容：
a. 圖片
b. 標題+分享 c. 價格信息，各種快遞信息和促銷信息 d. 商品規格選擇（並可添加購物車） e. 商品參數 f. 寶貝評價（可跳轉全部評價並返回） g. 商店信息（只可讀，不可跳轉） h. Bar：內含客服（跳轉獨立旺信）+收藏+移除比較 i. 加入購物車功能
其中最關鍵的就是商品參數與寶貝評價功能。有了這些參數和評價，我們就可以從冰冷的參數和溫暖的話語中，盡可能看到一個最真實的商品。然后對比他們，從而買到最合適的，最具有性價比，（還包郵）的商品。從而剁掉我們的雙手。
畢業季的感傷
當淘寶剁掉你的左手的時候，你要把右手也伸給他。
--剁手之神
終於，“比較”功能可以畢業了，我們作為開發者，就像送別孩子一樣不禁也有些感傷。可就在我們准備發布這個剁手黨的福利的時候，淘寶方給了兩個致命的反饋意見
1. 為什么要開新窗口比較？一個窗口不行么？
2. 為什么要打開獨立旺信？
其實這兩個選擇對我們來說，也是兩個艱難的選擇。我們也知道一個窗口比較方便（對於開發者來說，兩個窗口的線程相互交錯簡直就是人間噩夢），也知道內置旺信呼叫起來比較方便。但我們之所以做出這兩個艱難的選擇，也是經過深思熟慮的。
首先，對於新窗口來說，我們主要出於以下三個考量：
1. 第二窗口是 UWP 新加入的功能，是像 Cortana 和 Inking 一樣的值得推廣的新功能
2. “比較”功能是游離於淘寶主業務鏈的新功能，新窗口的話不會對原來的功能造成影響，但是用戶又急需這個功能
3. 淘寶 Web 端的比較功能是開新窗口比較的，這樣比較統一
而且放在一個窗口的話，操作復雜不說，整個 App 的結構也會改動很大，使得用戶學習成本高，操作不方便。
而對於“比較”窗口打開獨立旺信來說：
1. 使用獨立旺信聊天，可以新開一個窗口和賣家聊天，淘寶主窗口和比較窗口不發生任何跳轉，用戶可以繼續比較商品；
2. PC設備本身就是多窗口的設計，窗口之間切換很方便，如果是改為在淘寶內置旺信中聊天，此時想繼續添加商品進行比較時，需要從淘寶中退出聊天窗口，再去找到要比較的商品，然后添加比較；
3. 獨立旺信中左側最近聯系人始終顯示，可以方便的切換當前聊天的商家。
另外，當前的這種實現對之前的設計沒有影響，正常瀏覽商品詳情時，和以前一樣，在詳情頁點客服，左側可以看到商品詳情，右側是和店鋪聊天。
所以這其實也是“比較”功能的最終畢業“答辯”。
結語
說了這么多，其實也不知道該結什么語了。如果大家還對“比較”功能感興趣的話，請關注我們本博文的姊妹篇：
從淘寶 UWP 的新功能 -- 比較頁面來談談 UWP 的窗口多開功能