談談PC端的一些設計

說到PC端,這里不得不提到web,這兩個概念有些人容易弄混淆,認為是同一個意思。但其實是有區別的,準確的叫法會顯得你更專業一些。

web是指網頁,web端是需要多屏幕適配,即可以用電腦呈現,也可以用移動端來呈現。而PC僅僅是指用于在PC(電腦)瀏覽器上使用的 web頁面,可以說PC端是web端中的一個呈現形式。所以相對應地前端開發工程師我們一般稱為web前端工程師。了解了這個概念后,我們進入今天想要聊的關與PC端的幾個問題:

1、PC端官網還有必要做嗎?

2、后臺管理系統的設計價值在哪里?

3、與開發工程師交付時踩過的那些坑


一、PC端官網還有必要做嗎?

現在越來越移動端化,有人會問是否還有必要浪費資源做PC端的官網?但其實PC端還是要做的,只不過是需要用可適配的web端技術來做,而不是PC端和移動端分開來做,當然呈現形式和一屏的展示內容會有所不同,要遵循不同設備上的交互規則和操作習慣,來做一些個性化的調整。但整體的內容呈現和操作邏輯要相同,不然兩端相差太大會給用戶一定的學習和操作成本。

互聯網人的操作習慣一般都是先上網了解下該公司的相關信息,然后再決定是否會選擇這家公司,不管是購買服務產品還是其他。電腦端的特性就是內容呈現較豐富,對于坐在電腦前或使用電腦比較方便的用戶來說,是便于查詢信息的最佳選擇。當用戶經過查詢企業的相關信息后覺得比較滿意、感興趣,才有可能會去下載移動端來進行產品的進一步體驗;所以說PC端是一個重要的引流方式,不可或缺。比如官網一般長這樣,第一屏幕里有顯眼的引導下載移動端的入口。

圖片來自網絡


二、后臺系統的設計價值在哪里?

后臺管理系統一般被稱為B端,即大多面向企業內部員工操作,用于流程的管控與操作,不同部門間的審核流轉;再一個是作為平臺提供給商家的后臺訂單管理系統,比如一般都有商戶端(B端)和用戶端(C端),而企業內部管理系統作為商戶端和用戶端的連接點來進行整體監督和管控。

為了更好的迭代和優化、節約資源成本,小公司一般基于大公司做的開放組件庫來套入自己的業務內容,稍許調整就可以使用,省時省力。而大公司資源豐富,組成專業團隊來自行設計、開發屬于自己公司的組件庫,更貼合自身公司的業務場景和產品需求,更能靈活運用,從而提高統一性、效率性。如餓了么的 element、阿里螞蟻金服的 Ant Design 都是使用率較高的第三方開放組件庫。

圖片來自網絡


既然說小公司做后臺管理系統一般都是套用大公司的組件庫,那是不是說產品出了需求后,不用經過交互和界面設計就直接可以找開發同學套模版上線了?我不認為是這樣,產品需求只是在描述要做的事情,但至于怎么頁面交互更能讓用戶便于操作,怎樣的界面元素展示更能讓用戶明了要傳達的信息,減少其理解成本,這些都是提高人效的考慮因素,雖然是公司內部人員使用,但和C端產品一樣都是服務于“人”這個對象,也要遵循”人“的理解能力和操作習慣。不同的是B端在操作和名詞上允許有一些行業內的專業術語,要盡量貼合日常中的一些稱呼,便于溝通理解。

B端產品一般信息都比較多,稍不注意就會造成功能臃腫和信息凌亂,設計難點和價值在于多角色、多場景、多節點之間的流轉交互和狀態的展示、更需要在深刻理解業務的基礎上去做,這就要求設計師要貼近業務場景、多與產品經理和一線業務人員溝通、交流;才有可能做出提高操作人員效率的管理系統。B端產品一般都有自身核心內容的特殊性,一般沒有什么參考產品可言,因為設計商業機密,成熟的行業內的大公司也不會把自己的B端產品暴露出來,供我們學習參考。這一點相對于C端來說需要一點的門檻和難度。


三、與開發交付時踩過的那些坑

1、相同色值在不同屏幕下顯示不同

之前有做個一個網頁端的banner,中間使用主圖,當屏幕更大時,左右用純色背景來填充;相應的只提供給開發同學一個中間的主圖就可以了,左右的純色由開發同學用代碼自己寫;但開發同學在給我看效果的時候,發現同一個色值在圖片上的顏色和左右大碼寫的顏色視覺上有色差,而且還很明顯,下面圖來自網絡,非真實案例,此處只做示例展示:

主圖來自網絡


上面的圖這樣做,大家發現有什么問題嗎?當時經驗還不是很足,一時不知道什么原因,就上網搜索相關資料,原來是因為不同品牌的電腦顯示器顯示的色彩會有差別,包括飽和度都有差別。蘋果的電腦色彩顯示還算比較標準,更接近標準,這也是為什么大多設計師都選擇用蘋果的電腦的原因之一。

不光是在這個開發小哥哥上的顯示有色差,在別的電腦上可能還會展示成其他的色彩效果。這就是我們就可以理解為什么不同手機顯示的界面會有所差別

問題弄清楚了,下一步就是進行調整,把banner主圖的左右改為漸變透明(之前是純色),這樣不管在任何電腦上主圖和兩邊的背景都能完美過渡融合了。如下融合示例:

圖片來自網絡


2、按鈕的可延展性

如某個類型的按鈕文案字數不是固定的,2-6個字不等,這種按鈕在后臺系統上很常見,有時候不能為了精簡而精簡,還是需要能通過準確的表達讓用戶一眼明了、不要讓用戶去猜是什么意思。由于當時沒有充分了解到最少文案和最多文案的字數情況,因為產品文檔上是以4個字為示例的,所以設計圖上也就只給出了一個固定寬度為4個字的按鈕;由于前期沒有考慮周全,后期就會增加很多工作量,如重新設定最小按鈕寬度(按鈕2個字的時候如果固定左右的間距會顯得按鈕特別小),當超過4個字后再固定文案左右的間距來增加按鈕寬度來適應展示:


3、表格的縮放定義

后臺管理系統中常見的表格,大多組件里默認設定的每一項寬度都是等比縮放,但對于某些需求來說是不太合適的,比如表格里的信息項特別多,有的信息特別短,有的信息又特別長,如日期和地址之類的。這時候如果用默認等比縮放寬度的話就顯得不太合適,必要的情況下就應該按照需求做相應的特殊性處理,比如按不同的百分比來區分展示不同項內容的寬度,或固定某些少內容的項寬度,內容多的項做縮放展示等。這樣做出來的產品可能更符合需求預期,記得做之前要把自己的想法和開發同學進行溝通,如果不溝通的話,可能他也就按默認的做了,后面再調可能就有些重復性的工作了,


總結

工作中都是一個逐步積累經驗的過程,不要害怕犯錯而止步不前,因為不犯錯可能永遠也不知道它別后的原因是什么,正確的又應該是怎樣的。這樣的話下次才能避免一些“坑”,才能有理有據的說出這么做的理由,而不是只是感性設計。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容