談談PC端的一些設計

說到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ā)同學進行溝通,如果不溝通的話辩诞,可能他也就按默認的做了坎弯,后面再調可能就有些重復性的工作了,


總結

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末荧嵌,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子砾淌,更是在濱河造成了極大的恐慌啦撮,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件汪厨,死亡現場離奇詭異赃春,居然都是意外死亡,警方通過查閱死者的電腦和手機劫乱,發(fā)現死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門织中,熙熙樓的掌柜王于貴愁眉苦臉地迎上來锥涕,“玉大人,你說我怎么就攤上這事狭吼〔阕梗” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵刁笙,是天一觀的道長破花。 經常有香客問我,道長疲吸,這世上最難降的妖魔是什么座每? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮摘悴,結果婚禮上峭梳,老公的妹妹穿的比我還像新娘。我一直安慰自己烦租,他們只是感情好延赌,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布除盏。 她就那樣靜靜地躺著叉橱,像睡著了一般。 火紅的嫁衣襯著肌膚如雪者蠕。 梳的紋絲不亂的頭發(fā)上窃祝,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天,我揣著相機與錄音踱侣,去河邊找鬼粪小。 笑死,一個胖子當著我的面吹牛抡句,可吹牛的內容都是我干的探膊。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼待榔,長吁一口氣:“原來是場噩夢啊……” “哼逞壁!你這毒婦竟也來了?” 一聲冷哼從身側響起锐锣,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤腌闯,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后雕憔,有當地人在樹林里發(fā)現了一具尸體姿骏,經...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年斤彼,在試婚紗的時候發(fā)現自己被綠了分瘦。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蘸泻。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖擅腰,靈堂內的尸體忽然破棺而出蟋恬,到底是詐尸還是另有隱情,我是刑警寧澤趁冈,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布歼争,位于F島的核電站,受9級特大地震影響渗勘,放射性物質發(fā)生泄漏沐绒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一旺坠、第九天 我趴在偏房一處隱蔽的房頂上張望乔遮。 院中可真熱鬧,春花似錦取刃、人聲如沸蹋肮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽坯辩。三九已至,卻和暖如春崩侠,著一層夾襖步出監(jiān)牢的瞬間漆魔,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工却音, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留改抡,地道東北人。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓系瓢,卻偏偏與公主長得像阿纤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子夷陋,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內容