從ui圖到開發頁面該有的考慮

pekonchan發表於2018-12-13
UI

前言

開發經驗滿滿的前輩們，此篇文章或許對你們來講並不值得一提，這裡說的主要物件導向是小白，或者欠缺點經驗的開發者們（懂echarts的更佳）。這裡聊得是引導大家如何去思考一個問題，以我所在專案為例子，闡述我的思考方式和思路，也許對於某些人來講，能給予一些啟發。這裡說的沒有對與錯之分，我說的也未必都是正解，純粹地一個個人總結和分享，我也是一個小小白。如有錯誤請多見諒，不喜勿噴！

例子

從ui圖到開發頁面該有的考慮

以這介面中紅框部分為例子，用echarts實現，圖形都是比較基礎的餅圖和柱狀圖。想必大家都覺得這個很好實現吧。假設你知道echart的這兩種圖的基本配置項，大家的第一感覺是不是覺得，這個so easy？

假設你的老闆叫你評估個時間做出來，可能你會憑感覺地脫口而出，1-2個小時吧，甚至更短？

如果我在這裡加個提醒，叫大家儘可能去考慮全面再去回答老闆的問題，是否，直到這裡，你跟剛剛的想法發生了較大的變化？

這是分界線，在這之前，大家還是可以好好考慮全面一下，跟接下來，我要說的，對比一下

整體佈局

我們知道，這裡是有兩個echart圖，可以看成兩個div，放在一行，可以用

div {
    display: inline-block;
    width: 50%;
}
/** or **/
div {
    float: left;
    width: 50%;
}
複製程式碼

來實現，想必各位第一反應也是這兩個吧，反正我是的。

從ui圖到開發頁面該有的考慮

進一步去想，螢幕會變大縮小，如果縮小到很小的話，相比兩者擠不下一行了，這時就要換行。那麼，可能用flex佈局，更加方便，都不用自己寫媒體查詢就可以智慧的實現了。
然而，等到你真正去寫的時候，會發現，佈局亂糟糟，達不到預期，為何？
原因在echart圖形本身的佈局上，由於原本讓echart正常展示的功能，會存在position等佈局css樣式，我們都知道，使用flex佈局，其子元素的一些佈局樣式會失效。 因此，這種方案不可行。 很遺憾，我們還是通過媒體查詢去處理這種情況吧。

接下來，在圖中看到

從ui圖到開發頁面該有的考慮

雖說這是兩個div，但是其實並沒有緊挨在一起的，從美觀上講，的確，需要用空白的間隔會更好看。那麼怎麼處理這個空白間隔呢？ 想必大家都覺得這個有什麼好講的，搞個margin或者padding不就好了嘛，emmm...我一開始也是這麼想的，但是準備寫程式碼的時候，就會覺得好麻煩（- _ - 我懶）：

  1. 為第一個div設定個margin-left？那區別對待吧，加個類名，然後設定css。
  2. 兩個div的寬度和margin值計算好分配好空間佔比
  3. 那麼小螢幕換行的時候，就會多了個margin-left了，那媒體查詢處理掉吧

思路很清晰，實現起來也是非常簡單的。但是，我後來還是放棄了，
第一我覺得，少點類名，程式碼更漂亮；
第二，我覺得起名字好煩啊，用偽類？可以啊，但是也要處理好能否真的定位好這個，撇去本身專案的程式碼的一個整體環境，其實也是很簡單的，但是當置於一個複雜的程式碼環境裡，各種命名錯綜複雜的情況下，少用偽類還是較為保險；
第三，我不想計算；
第四，關鍵的關鍵是，我覺得存在更好的辦法。

更好的辦法（還是要類名，但是專案裡我是統一了兩個類名）

/** 這兩個類名估計大家都很熟悉，但是我專案沒有引用boostrap，這是我自己定義的全域性類名 **/
.pull-left {
    float: left!important;
}
.pull-right {
    float: right!important;
}
複製程式碼

回到這個圖裡，我為第一個div設定了pull-left類名，第二個div設定了pull-right類名。
但是他們的寬度不再是width: 50%了，改成更小的值，以便留出需要的空白空間。（當然，有些人可能一開始就想到用這個佈局了，這裡只是在引導一個思考方式，最終形成一個好的思路而已）

圖形的特殊情況

開發者們都深有體會，要實現一個ui圖上的頁面不難，難就難在，存在多種情況，多種未知因素，進而導致的個別特殊情況或極端情況。如果說，開發時間為100%，那麼還原ui圖的情況（正常的情況），佔據了70%時間，30%就花在處理這些極端情況上了。心裡面就覺得很憤懣不平，明明這些特殊情況和極端情況出現概率那麼小，缺花費了那麼多時間去搞，甚至把程式碼都搞得更復雜，維護也不好。但是，這就是現實，沒辦法了，我們能做的就是，在開始coding前，儘量全面考慮，從中制定方案，避免開發到一半發現寫不下去更換方案這就尷尬了。

廢話不多說，這裡會有什麼特殊情況呢？以餅圖為例子。

情景一

說一下大致背景需求，這裡的餅圖有多少組資料不是固定的，什麼意思，圖上不是有六組資料嘛（紅書釋出、搜狗搜尋...），就是圖上六中顏色的資料嘛。這些資料個數，都是未知的，可能很多可能很少。

瞭解基礎背景後，大家有什麼想法。

由於這些資料個數都是未知的，因此我們要考慮好兩個極端的情況，非常少資料的情況（也就是1組資料），一個是很多資料（無窮）。 會對圖形有什麼影響？變現在？

資料的多少，會表現在圖例上，要考慮哪些問題呢（漸進式思考）？

  1. 不論圖例多少，整體圖例的位置都要垂直居中於餅圖，因此legend的top值，不能是其他數值，只能是'middle'，那麼資料很多的時候，是否會自動繼續往下堆疊，仍然保持垂直居中呢？
  2. 包含echart的圖的container，一定要設定寬度和高度才能呈現出圖，因此，不能實現高度隨著圖例的變多而變高，因此光設定個middle仍不足。一般情況下，既然設定了高度了，如果圖例數目往下排列的時候到達高度的極限，會自動新增第二列。但是在這裡，由於一行存在兩個div，而且寬也設定了，明顯讓其自由這麼發展下去，只會有一部分圖例被遮擋住了。
  3. 很遺憾，面對這種問題，雖然ui圖上沒有考慮到多圖例的情況，產品經理也可能沒考慮到，那麼或許我們需要自己決定改造一下了（最好諮詢一下產品吧），反正就是，我們要有這個極端意識。解決辦法就是，利用echarts提供的圖例分頁功能了。類似這種

從ui圖到開發頁面該有的考慮

情景二

上面也說了，有多少組資料都是未知，那麼這些資料的名稱（小紅書釋出這些...）也是未知的，自然這些名稱長度也是未知的。那麼問題就來了，如果名字很長怎麼辦？
思路：

  1. echarts的圖例很長的時候，不會自動換行的，當然選擇了canvas生成的圖，更加不可能通過樣式改變了。而我們這裡，如果名稱很長了，會超出到螢幕外面，不好！
  2. ui圖也沒告訴你這種情況下該怎麼辦？但是，我們一定要有這個意識（重複了很多遍了，我自己都嫌自己），能怎麼辦？截斷唄。至於截斷的方式，可以用字串的階段，也可以用echart自帶的一個方法截斷（自己去查，印象才更深）

從ui圖到開發頁面該有的考慮

  1. 是不是截斷了就沒事了？錯，圖例的水平位置就要考慮好了，如果還是以ui圖那些圖例情況來考慮水平位置的放置的話，可能真遇到需要截斷的情況下，水平位置放得不好的話，就會出現就算你截斷了，但是還是顯示不出來，直接被父層的元素給砍掉了內容。
  2. 因此，要結合螢幕的情況，考慮好截斷多少，然後以這種截斷後的情況來調整圖例的水平位置，這樣才能避免上述問題。 既然截斷了，使用者也就不知道真正的名字了，那麼我們自然也要需要為截斷的圖例提供tooltip，用echart的圖例tooltip功能就好了

三） 既然資料的名稱會有很長的情況，那麼自然而然，對應的tooltip上的名稱，也會很長。 這裡的tooltip有兩種，一種是懸浮在餅圖上的tooltip，一個是懸浮在圖例上的tooltip

不論哪種tooltip，存在的問題性質上是一樣的。

  1. 如圖，如果名稱像紅框那麼長，那麼tooltip也會這麼長，如果不幸tooltip的層級不夠高，還有可能被別的元素遮擋住了。
  2. 對於圖例的tooltip，名稱一定要展示完全的，不然都省略了，這個tooltip就沒啥意義了。但是也不能讓它那麼長，咋辦？那就讓他自動換行唄。至於自動換行的方法，我不知道能不能設定這個tooltip的寬度，如果可以的話，可以設定寬度，然裡面的文字自動換行就好了。如果不行，那就截斷字串，用'\n'連線再展示出來就可以了（我是用這種）。
  3. 對於懸浮在餅圖上展示的tooltip，同樣用上述的換行方式也可以，也可以用截斷的方式，反正都有圖例說明了，但是還是換行好點吧，具體問自己的產品經理吧。
  4. 那麼問題就來了，到多寬才進行換行/截斷呢？先看個失敗的例子：
  5. 截斷的寬度把握不好，就會還是存在被強制遮蓋的情況。因此，具體要多寬，自己要綜合頁面上的各種情況來好好斟酌了，多測試。

最後

大概要想說的就這麼點了，其實真要處理起來，細節的東西還是很多的，不過我也不多說了。希望大家以後在拿到ui圖拿到需求後，不要過於著急馬上進行開發，還是先理解好需求，考慮好各種情況下，在進行編碼。此篇文章或許對你思考起到那麼丁點作用，這樣我也感到開心。 祝各位開發者越來越厲害~~~

相關文章