說到PC端,這里不得不提到web直晨,這兩個概念有些人容易弄混淆搀军,認為是同一個意思。但其實是有區(qū)別的勇皇,準確的叫法會顯得你更專業(yè)一些罩句。
web是指網頁,web端是需要多屏幕適配敛摘,即可以用電腦呈現门烂,也可以用移動端來呈現。而PC僅僅是指用于在PC(電腦)瀏覽器上使用的 web頁面兄淫,可以說PC端是web端中的一個呈現形式屯远。所以相對應地前端開發(fā)工程師我們一般稱為web前端工程師。了解了這個概念后捕虽,我們進入今天想要聊的關與PC端的幾個問題:
1慨丐、PC端官網還有必要做嗎?
2泄私、后臺管理系統(tǒng)的設計價值在哪里房揭?
3挨措、與開發(fā)工程師交付時踩過的那些坑
一、PC端官網還有必要做嗎崩溪?
現在越來越移動端化,有人會問是否還有必要浪費資源做PC端的官網斩松?但其實PC端還是要做的伶唯,只不過是需要用可適配的web端技術來做,而不是PC端和移動端分開來做惧盹,當然呈現形式和一屏的展示內容會有所不同乳幸,要遵循不同設備上的交互規(guī)則和操作習慣,來做一些個性化的調整钧椰。但整體的內容呈現和操作邏輯要相同粹断,不然兩端相差太大會給用戶一定的學習和操作成本。
互聯(lián)網人的操作習慣一般都是先上網了解下該公司的相關信息嫡霞,然后再決定是否會選擇這家公司瓶埋,不管是購買服務產品還是其他。電腦端的特性就是內容呈現較豐富诊沪,對于坐在電腦前或使用電腦比較方便的用戶來說养筒,是便于查詢信息的最佳選擇。當用戶經過查詢企業(yè)的相關信息后覺得比較滿意端姚、感興趣晕粪,才有可能會去下載移動端來進行產品的進一步體驗;所以說PC端是一個重要的引流方式渐裸,不可或缺巫湘。比如官網一般長這樣,第一屏幕里有顯眼的引導下載移動端的入口昏鹃。
二尚氛、后臺系統(tǒng)的設計價值在哪里?
后臺管理系統(tǒng)一般被稱為B端洞渤,即大多面向企業(yè)內部員工操作怠褐,用于流程的管控與操作,不同部門間的審核流轉您宪;再一個是作為平臺提供給商家的后臺訂單管理系統(tǒng)奈懒,比如一般都有商戶端(B端)和用戶端(C端),而企業(yè)內部管理系統(tǒng)作為商戶端和用戶端的連接點來進行整體監(jiān)督和管控宪巨。
為了更好的迭代和優(yōu)化磷杏、節(jié)約資源成本,小公司一般基于大公司做的開放組件庫來套入自己的業(yè)務內容捏卓,稍許調整就可以使用极祸,省時省力慈格。而大公司資源豐富,組成專業(yè)團隊來自行設計遥金、開發(fā)屬于自己公司的組件庫浴捆,更貼合自身公司的業(yè)務場景和產品需求,更能靈活運用稿械,從而提高統(tǒng)一性选泻、效率性。如餓了么的 element美莫、阿里螞蟻金服的 Ant Design 都是使用率較高的第三方開放組件庫页眯。
既然說小公司做后臺管理系統(tǒng)一般都是套用大公司的組件庫,那是不是說產品出了需求后厢呵,不用經過交互和界面設計就直接可以找開發(fā)同學套模版上線了窝撵?我不認為是這樣,產品需求只是在描述要做的事情襟铭,但至于怎么頁面交互更能讓用戶便于操作碌奉,怎樣的界面元素展示更能讓用戶明了要傳達的信息,減少其理解成本寒砖,這些都是提高人效的考慮因素道批,雖然是公司內部人員使用,但和C端產品一樣都是服務于“人”這個對象入撒,也要遵循”人“的理解能力和操作習慣隆豹。不同的是B端在操作和名詞上允許有一些行業(yè)內的專業(yè)術語,要盡量貼合日常中的一些稱呼茅逮,便于溝通理解璃赡。
B端產品一般信息都比較多,稍不注意就會造成功能臃腫和信息凌亂献雅,設計難點和價值在于多角色碉考、多場景、多節(jié)點之間的流轉交互和狀態(tài)的展示挺身、更需要在深刻理解業(yè)務的基礎上去做侯谁,這就要求設計師要貼近業(yè)務場景、多與產品經理和一線業(yè)務人員溝通章钾、交流墙贱;才有可能做出提高操作人員效率的管理系統(tǒng)。B端產品一般都有自身核心內容的特殊性贱傀,一般沒有什么參考產品可言惨撇,因為設計商業(yè)機密,成熟的行業(yè)內的大公司也不會把自己的B端產品暴露出來府寒,供我們學習參考魁衙。這一點相對于C端來說需要一點的門檻和難度报腔。
三、與開發(fā)交付時踩過的那些坑
1剖淀、相同色值在不同屏幕下顯示不同
之前有做個一個網頁端的banner纯蛾,中間使用主圖,當屏幕更大時纵隔,左右用純色背景來填充翻诉;相應的只提供給開發(fā)同學一個中間的主圖就可以了,左右的純色由開發(fā)同學用代碼自己寫巨朦;但開發(fā)同學在給我看效果的時候,發(fā)現同一個色值在圖片上的顏色和左右大碼寫的顏色視覺上有色差剑令,而且還很明顯糊啡,下面圖來自網絡,非真實案例吁津,此處只做示例展示:
上面的圖這樣做棚蓄,大家發(fā)現有什么問題嗎?當時經驗還不是很足碍脏,一時不知道什么原因梭依,就上網搜索相關資料,原來是因為不同品牌的電腦顯示器顯示的色彩會有差別典尾,包括飽和度都有差別役拴。蘋果的電腦色彩顯示還算比較標準,更接近標準钾埂,這也是為什么大多設計師都選擇用蘋果的電腦的原因之一河闰。
不光是在這個開發(fā)小哥哥上的顯示有色差,在別的電腦上可能還會展示成其他的色彩效果褥紫。這就是我們就可以理解為什么不同手機顯示的界面會有所差別
問題弄清楚了姜性,下一步就是進行調整,把banner主圖的左右改為漸變透明(之前是純色)髓考,這樣不管在任何電腦上主圖和兩邊的背景都能完美過渡融合了部念。如下融合示例:
2、按鈕的可延展性
如某個類型的按鈕文案字數不是固定的氨菇,2-6個字不等儡炼,這種按鈕在后臺系統(tǒng)上很常見,有時候不能為了精簡而精簡查蓉,還是需要能通過準確的表達讓用戶一眼明了射赛、不要讓用戶去猜是什么意思。由于當時沒有充分了解到最少文案和最多文案的字數情況奶是,因為產品文檔上是以4個字為示例的楣责,所以設計圖上也就只給出了一個固定寬度為4個字的按鈕竣灌;由于前期沒有考慮周全,后期就會增加很多工作量秆麸,如重新設定最小按鈕寬度(按鈕2個字的時候如果固定左右的間距會顯得按鈕特別谐踵凇),當超過4個字后再固定文案左右的間距來增加按鈕寬度來適應展示:
3沮趣、表格的縮放定義
后臺管理系統(tǒng)中常見的表格屯烦,大多組件里默認設定的每一項寬度都是等比縮放,但對于某些需求來說是不太合適的房铭,比如表格里的信息項特別多驻龟,有的信息特別短,有的信息又特別長缸匪,如日期和地址之類的翁狐。這時候如果用默認等比縮放寬度的話就顯得不太合適,必要的情況下就應該按照需求做相應的特殊性處理凌蔬,比如按不同的百分比來區(qū)分展示不同項內容的寬度露懒,或固定某些少內容的項寬度,內容多的項做縮放展示等砂心。這樣做出來的產品可能更符合需求預期懈词,記得做之前要把自己的想法和開發(fā)同學進行溝通,如果不溝通的話辩诞,可能他也就按默認的做了坎弯,后面再調可能就有些重復性的工作了,
總結
工作中都是一個逐步積累經驗的過程译暂,不要害怕犯錯而止步不前荞怒,因為不犯錯可能永遠也不知道它別后的原因是什么,正確的又應該是怎樣的秧秉。這樣的話下次才能避免一些“坑”褐桌,才能有理有據的說出這么做的理由,而不是只是感性設計象迎。