大家好，我是公衆号「線下聚會遊戲」作者HullQin，開發了《聯機桌遊合集》，是個網頁，可以很友善的跟朋友聯機玩鬥地主、五子棋等遊戲。
1. 《聯機五子棋》簡介
遊戲位址在這篇《我做了個《聯機桌遊合集: UNO+鬥地主+五子棋》無需下載下傳，點開即玩！叫上朋友，即刻開局！不看廣告，不做任務，享受「純粹」的遊戲！》文章的開頭，你可以去體驗一下。
不知道你玩起來感覺怎麼樣，反正我在開發的時候，處處為極緻使用者體驗着想。絞盡腦汁也要把使用者體驗做到最好！
這篇文章，帶你分析一下，我在這方面，做了哪些努力。
2. 移動端适配
它的所有頁面，我都做了移動端适配。因為我知道，大部分使用者，都會用手機通路我的網頁。
2.1 棋盤寬度盡可能大
在移動端，棋盤寬度剛好撐滿手機螢幕的寬度，這是最大程度上，給使用者下棋的便利，避免誤操作。
其中移動端适配，我已經分享了一點經驗，見：《2行代碼，讓你的UI适配移動端、PC端，快來收藏》。我五子棋遊戲移動端适配的方法，就采用了文中介紹的方法，隻用了2行代碼。
2.2 網頁允許雙指放大
此外，如果部分使用者手機還是太小，導緻經常點錯棋子，我也允許使用者雙指放大棋盤，如圖：
3. PC端适配
除了移動端，PC端體驗也是非常好的，如圖：
這主要得益于我設定了棋盤的
max-width
屬性，使得在螢幕特别寬的時候，它能保持一個合理的棋盤大小，争取在大部分PC上，一頁能展示完整棋盤。
當然，如果螢幕寬度小于棋盤的
max-width
，那麼寬度就會使用預設值
100%
，使之撐滿螢幕寬度。
4. 點選一次下棋 VS 點選兩次下棋
我調研過，很多移動端五子棋，為了避免使用者點錯棋子，是做了二次确認的：即第一次點選空位，會先用紅圈标記它，再次點選紅圈标記，才會真正下棋。
| 優點 | 缺點 | |
|---|---|---|
| 點選一次下棋 | 相對後者，降低了50%使用者下棋的互動次數 | 容易點錯位置 |
| 點選兩次下棋 | 點錯位置幾率大大降低 | 互動繁瑣 |
我認為：本來在小螢幕上找準一個位置就不容易，還要連續2次找準點選，才能下棋成功，太累了！
是以我堅持：點選一次就下棋。降低了50%使用者下棋的互動次數。
此外，我這個點選一次下棋，是有辦法應對“容易點錯位置”這個缺點的！
- 應對方式一：允許螢幕雙指放大後，再下棋，點錯機率降低。
- 應對方式二：提供悔棋功能，即使點錯了，跟朋友求求情，他會同意你悔棋的～
而其它五子棋APP，因為不支援雙指放大棋盤、且是線上比對玩法（導緻悔棋成功率下降，因為陌生人看到你下錯了，老開心了，就等着赢你掙分升段位了），是以不能忍受“容易點錯位置”的缺點。最終他們使用“點選兩次下棋”的方案，我也能了解其原因。
5. 棋子的Hover态
在PC端，你滑鼠移動到棋盤上，隻要該你下棋了，它就會半透明展示棋子，表明：如果你點選，那麼你就在這裡下棋了。如圖：
但是在移動端，是沒有Hover态的，因為移動端沒有滑鼠。需要把移動端的Hover态取消掉，否則會有奇怪的現象：
移動端其實有光标，你點選哪裡，光标就停留在那裡了。如果你點選了某個地方下棋了，然後又悔棋了。那麼那個地方會半透明展示棋子，給使用者很大的困惑。
我在這篇文章分享了，如何實作PC端有Hover态、移動端無Hover态，見：《使用者體驗好的 Button，在手機上不應該有 Hover 态》