一個網站的 UI 好看與否是否只能是站長的孤芳自賞?

我在前端的開發中,基本精確到每個像素,比如margin-left:327px還是margin-left:326px都會糾結很久,為了考慮到陰影效果,在HTML5下用box-shadow,在IE下用圖片拼接,或者border-radius或是text-shadow等等,在內行人士看來,會認為這個前端UI很漂亮,但是在非極客的眼中,他們會注意這些么?我們有必要在這上面下功夫嗎?

以京東閃購(http://red.jd.com)為例:

這是一個圖片hover前的狀態

現在hover後

我們可以看到這個在hover後京東的前端在上面增加了一個半透明黑的cover層,並且底圖加了毛玻璃磨砂效果,這個在IE下也能實現,CSS3和IE的filter都可以blur,並且在hover時那三個六邊形也實現了CSS3的旋轉變換的效果,這個在內行人士看來做得非常精美,但是普通人也許毫無感覺,京東並非面對極客,何必在這上面大費周章?也許下面一個「我們」認為很普通或者狂妄一點叫做沒太多前端技術含量的網站,反而是廣大不明真相群眾認為最好看的網站:

那我們是否有必要糾結前端CSS技術,不加任何渲染,平鋪直敘,反而更適合網民的視覺習慣,畢竟大部分網民不是極客,他們不會帶有任何鑒賞前端UI的心態來瀏覽網頁,試想想你在大學時的大學選課系統或是大學教務系統里,你注意過它的UI嗎,這樣的話我們有必要還來糾結UI這些細節嗎?


因為 99% 的用戶不在意就不做,把剩下 1% 一併放棄,這樣子真的大丈夫嗎?

女為悅己者容,你為什麼不能為這 1% 能夠欣賞你的人做好每個細節?

當然也沒什麼好強求的,如果你不願意就算了,有願意的。


他們會看出來區別的。他們只是說不出為什麼而已。

自從 CSS3、HTML5 和 jQuery 普及了以後,全世界的前端都感覺到自由和解放,結果卻是誕生了一系列讓人眼前一亮但是留不住觀眾的 「模板式」 網站。沒人會僅僅因為網站好看而長期駐足——

Content is the king.

接下來就是 marketing department 的工作了 ;-)

———

看了題主後來貼出來的圖,我覺得我回答地最貼題了……


沒有人會因為你「精確到了每個像素」、「用了box-shadow來實現陰影的感覺」、「用text-shadow來實現文字的陰影」、「用了border-radius來實現圓角等等等等」就覺得「這個網站很漂亮」

但是,他們會因為你「精確到了每個像素,用了box-shadow來實現陰影的感覺,用text-shadow來實現文字的陰影,用了border-radius來實現圓角等等等等」以及你的同事們對於UI/UX、對於網路請求的速度、穩定性等等等等的精益求精的態度,知道這個網站漂亮,用著爽;而那個網站丑,各種不和諧的廣告和彈窗真心讓人心情無法愉悅。或許他們只是表達不出來個所以然,亦或者只是你根本沒有渠道收穫他們的讚美而已。

請堅持自己做產品的態度!

類似的問題和回答》一些人分析所謂電影中構圖、色彩的暗示等,觀眾能感知嗎?


沒有人會因為你「精確到了每個像素,用了box-shadow來實現陰影的感覺,用text-shadow來實現文字的陰影,用了border-radius來實現圓角等等等等」就覺得「這個網站很漂亮」,內行的人也不會。要是用了這個就能保證漂亮那也太輕鬆了。

所以你這個問題根本不成立,沒有必要把你對細節的追求拔高到極客的審美上去,這些都是前端工程師的基本功而已,漂不漂亮取決於設計師。何必把注重細節和大眾審美對立起來?這麼沒信心?


http://msn.com

http://msn.com.cn

===

我們都知道UI有很多原則,一致性,準確性,布局合理化,操作合理性,響應時間合理化。

同時還有UI的必備品質,簡潔,清晰,熟悉,響應一致,美觀。

===

我無法說出http://msn.com與http://cn.msn.com的孰優孰劣,但是我知道相比之下,後者在中國更加接地氣。

細節的UI改進普通的受眾很難察覺,但你不得不承認有時候一個pixel的改變會發生意想不到的效果,眾多的細節改變導致了最終的質變而已。

但就像百度百科裡面的這段話一樣:

在國內UI還是一個相對陌生的詞,即便是一些設計人員也對這個詞不太了解。我們經常看到一些招聘廣告寫著:招聘界面美工、界面美術設計師等等。這表明在國內對UI的理解還停留在美術設計方面,認為UI的工作只是描邊畫線,缺乏對用戶交互的重要性理解;另一方面在軟體開發過程中還存在重技術而不重應用的現象。許多商家認為軟體產品的核心是技術,而UI僅僅是次要的輔助,這點在人員的比例與待遇上可以表現出來。

但這不是UI設計真正的價值體現,只是UI設計發展的一個必經過程。我們以物質產品手機行業為例,當手機剛剛進入市場的時候不但價格貴的驚人,而且除了通話以外沒有什麼其他功能。由於當時的主導是技術,所以大家都把精力放在信號、待機時間、壽命等方面,對於產品的造型,使用的合理性很少關心。事過境遷,如今技術已經完全的達到用戶的需求,於是商家為了創造賣點,提高競爭力,非常重視產品的外觀設計,除此之外還頻頻推出簡訊、彩屏、彩信、弦鈴聲、攝像頭等等。這樣一來產品的美觀、個性、易用、人性化等等都成了產品的賣點。軟體產品與物質產品的發展是相同的。過去由於計算機硬體的限制,編碼設計成為軟體開發的代名詞,美觀親和的圖形化界面與合理易用的交互方式都沒有得到充分的重視,實際上這個時期的軟體叫作軟體程序,而不是軟體產品。

現今隨著計算機硬體的飛速發展,過去的軟體程序已經不能適應用戶的要求。軟體產品在激烈的市場競爭中,僅僅有強大的功能是遠遠不夠的,不足以戰勝強勁的對手。幸運的是在國內一些高瞻遠矚的民族企業已經開始意識到UI給軟體產品帶來的巨大賣點了,例如金山公司的影霸、詞霸、毒霸、網標,由於重視UI的開發與地位,才使得金山產品在同類軟體產品中首屈一指。聯想軟體的UI部門積極開展用戶研究與使用性測試,將易用與美觀相結合,推出的雙模式電腦、幸福系列等成功UI範例,為聯想贏得全球消費 PC第三的稱號等。就連作為上海服裝設計專業龍頭的東華大學也開辦了英丞設計學院專門教UI。實踐證明,各商家只要在產品美觀和易用設計方面很小投入,將會有很大產出。其投入產出比,要比在功能領先性開發上的投入小得多。

我們不得不承認現階段中國在很多領域都與西方發達國家有相當大的差距,如何趕上並超過他們是我們這代人肩負的歷史使命。軟體產品領域不象物質產品那樣存在工藝、材料上的限制,軟體產品核心問題就是人。提高軟體UI設計師個人能力,減小人員上的差距,是中國UI發展首要關鍵的問題。

中國的UI大局上還處於起步階段,你所以為的你的孤芳自賞其實是你正在這個行業的前端,正在融入這個行業並成為諸多和它一起成長的人群中的一份子。

所以你失望個毛線,你做的是正確的,迷茫的也是大多是UI從業人員迷茫的。

但我們不妨看看百度首頁這十年的變化,你就會明白,UI已經逐漸融入到我們生活中了,不知不覺。

2001年

從圖中的右欄:百度客戶。我們可以看出百度最初做搜索產品主要是面向網站客戶的,為一些門戶網站提供技術支持,收取一定的產品費用。(並且頁面作得實在是,左欄和底欄竟然是重複的)

2002年1月的百度首頁(其實還是脫離不了門戶的格局)

在隨後百度有名的「閃電計劃」及MP3搜索等產品成功,百度的首頁應是從谷歌首頁找到了靈感,以產品為導向來設計首頁,簡潔有力。

2003年3月

2003年12月的版本(有了貼吧、圖片搜索等眾多產品,都集中在首頁)

應該說從2004年開始,百度首頁的格局就定下基調了,後來幾年的改版都沒有太大的變化。

2004年4月版本的百度首頁(這個頁面格局存在了有兩年多)

直到2005年,出現了一個更多(圖示為2005年聖誕的LOGO)

2006年五一勞動節的百度LOGO

2007年的百度,頁面更簡潔,並且增加了空間在搜索框下(這個格局也存在了有一年多。LOGO為六一兒童節)

2008年端午節的百度首頁

2008年7月18日,百度首頁又改版了,在空間的右側增加了hao123的鏈接。hao123是百度04年8月收購的一家網址站。

直到現在……

據說新的首頁:

---資料查閱

Web InfoMall

百度秘密測試極簡新首頁 7年舊首頁或終結_Baidu 百度_cnBeta.COM

百度的首頁變化歷史(ZT)_~~~~~_百度空間

百度秘密測試極簡新首頁回顧百度首頁變化史


站長都覺得不好看的東西,你覺得在正常情況下,大多數人就會接受?


其實現在很多設計師都完全不用陰影的,太低級了

細節不是一切,很多時候過度追求細節是對視覺傳達的破壞


真的優秀的設計或許渾然天成,沒有用多少個像素的陰影、多大的圓角這樣的公式,讓外行的人雖然說不上為什麼,但也會覺得很美。

但是這就像藝術一樣,有的人認為藝術是陽春白雪,曲高和寡;也有人認為真正的藝術是讓所有人都能感受到美的。在我看來,這兩種說法都沒錯,因為藝術本來就有很多種方式。

回到這個問題,作為前端設計師是否有必要精確到像素,注重細節?取決於你是寫意派還是寫實派了,並沒有優劣之分,應用得當都是可以創造出好的作品的。但是對於初學者而言,靈感未必是常有的,這時候還是老老實實先做好寫實派,規規矩矩地注意每一個像素吧!


普通非極客的網民不會欣賞視覺上的細節雕琢

所以只要你的網頁不很醜,就不會被非極客吐槽視覺樣式,也不會引起使用不適。

多把心思用在交互上吧,真的。用戶雖然也不能說出哪裡交互設計得好,但是用著會覺得舒適。


在沒能力成為決定審美標準的人之前,請努力成為尊重他人審美觀念的人

還有,

不用擔心別人看不懂你的良苦用心,美好的東西,大家看了都會覺得賞心悅目。

不用擔心好的設計遇不見伯樂,好的東西肯定會受歡迎,群眾的眼睛是雪亮的。

如果做出來一個東西,真的淪落到了只有孤芳自賞的地步,那是失敗,不值得讚賞,不要太玻璃心

最後,如果認真的做好了每一個環節相關的research和user testing,怎麼會做出來的東西只有你自己喜歡而已呢?

----------------------------------------------------------------------------------------------

你補充了描述,又改了文字,那我繼續說幾句:

為什麼你覺得普通用戶看不懂你的良苦用心呢?他們不能像我們一樣說的頭頭是道,但是他們能感受到網站的美醜,以及這網站是否好用。

我們做網站,設計網站的一切基礎,就是為了用戶用著開心,舒心,方便,快捷

比如說,這句話我用了加黑加粗斜體還有下劃線的文字效果,讓你不得不注意這句話。

這種情況,「讓你不得不注意這句話」 就是我的目的,你注意到了,我的目的就達到了。而我不是讓用戶看到這句話之後,能分析出我到底用了哪些文字效果。

一切設計都是為了目的服務,目的達到了,我的設計就是好設計,至於用戶能不能判斷出我用了多少像素,幾條陰影,多少種效果,對我來說一點都不重要。

你一直在糾結的問題,是你用了這麼多技能,這麼多效果,你怕用戶不知道,你怕用戶不在乎。你能不能跳出來想想:你設計的時候用上了這麼多東西,你的目的達到了嗎?

具體情況要具體分析:

如果你不知道用戶喜歡什麼,請去做user testing

如果你不知道是否要多一個像素,在用戶視覺上造成了怎樣的差別,請去做user testing

如果你不知道要不要用hover,用戶能不能接受,請去做user testing

不好意思,這些zhihu都幫不了你。

關於你說的選課系統,你問了一句:「試想想你在大學時的大學選課系統或是大學教務系統里,你注意過它的UI嗎」?

那我問問你,你用的爽嗎?你用的開心嗎?它沒有影響你的效率嗎?你覺得它很漂亮啊???

我們做IT是幹嘛的?做IT就是為了解決問題,為了讓我們的生活變的更美好的啊。

你用的不爽你跟學校說啊,你用的不開心就跟學校提意見啊。我大學期間,學校的用戶界面大更新了2次,最近聽說又更新了,因為有一群畢業學生覺得界面不好,重新設計了,通過了N次的user testing,學校直接採用了。

最後,

誰說用戶感受不到了?每次他們說用的不爽的時候,我們就應該轉身去找原因了。

但是,找原因這種活還是留給我們吧。你要是指望用戶告訴你是哪裡的陰影出了問題,你不覺得這太強人所難了嗎?


「開發的時候精確到了每個像素,用了box-shadow來實現陰影的感覺,用text-shadow來實現文字的陰影,用了border-radius來實現圓角等等等等」

精確到每個像素這不是最基本的嗎?你居然把這個拔高到了UI好不好看的地步。

另外你列舉的那些,只是最普通的CSS3特性(甚至在部分許多人在使用的舊版本IE下無法正常展示,我一般為了兼容會切圖再做個css sprite來實現,我不知道你是直接用那些特性還是用了其他判斷兼容解決方案)。

使用這些特性,只是為了讓UI看起來不突兀而不是變得好看。

因為好看的標準每個人都是不一樣的

但是難看的標準卻基本很一致,例如這網站:http://www.gov.cn/ 雖然也是精確到了每個像素(你TM開玩笑吧,一個前端沒精確到每個像素是幼兒園數學沒畢業嗎?),但是大部分人都會覺得難看,因為配色突兀,沒有過渡效果,而且部分控制項存在兼容問題

看來你是一個剛入門的前端。


要是淘寶知乎都是第一張圖的水平,我感覺你就不會繼續留在知乎,妹子們也不會去淘寶了..

我感覺題主是沒見過難看的UI,可以去看看帶edu和gov的


他們可能感受不到,但是他們一定會說,誒,這個看著好看。有這一點就夠了。因為你很難讓用戶說出這個設計,細節好在哪裡,但是這些細微之處,能讓人感到這個很用心。當他到另一個不在意細節這樣的一個網站時,他就會比較出來。


按你這麼說,五星級酒店的廚師在路邊小飯館裡請就可以了。管飽!


其實和技術用的多少無關吧?設計這種東西主要是理念,你覺得google的前端用了很多技術嗎?但就是因為簡潔看著舒服。


樓主是沒什麼審美的前端(有些前端還是挺有美感的);

樓主舉例的那個39健康網好醜,上個世紀的審美。

設計師很有必要讓世界美些,讓包括樓主在內的大部份不明真相的人的審美趕緊跟上來。

美不是費盡心思的形式,設計師的審美也要跟上時代。


看重用戶體驗


就說你的這個網站

若我說不好看,並不是你的PX的問題

是你圖片的問題

兩個人物後面的圖片,太TM假了,漂亮與否還是得看網頁設計師


——

贊同 @鄧妍 的第一句話,我想給出一個偏認知心理學的見解。

我特別喜歡把玩各種各樣的交互界面,甚至自己動手DIY過一些簡單的交互界面。我現在已經與專職的 UI 設計師一起工作過一年多了,從自己的親身經歷出發可以證明:

  • UI 有亮點時,我能感覺出來,UI 設計師也知道我的確感覺到了,但我一用語言描述,UI 設計師就會指出我說錯了
  • UI 有缺點,我也能感覺出來,UI 設計師也知道我的確感覺到了,但我一用語言描述,UI 設計師就會指出我說錯了(這裡所謂的【錯】,既有我用詞不當的錯,也有設計師堅持使用專業辭彙,絲毫不肯順著我這個業餘選手的思路去思考的錯

當我的感覺跟我的語言描述不一致的時候,有沒有辦法讓我的語言描述與 UI 設計師的實際思路恰好吻合呢?有辦法,就是反覆確認,不厭其煩地確認,大約經過不超過十次【是這個地方讓我感覺好嗎?不是。。;是哪個細節讓我感覺好嗎?也不是。。你看是不是這個地方讓你感覺好?。。。】這樣的對話以後,我的確能夠找到【讓我感覺好的關鍵點】,但是溝通成本太高了,對於一個純路過的 UI 使用者而言,這樣反覆確認,可能會激怒使用者。。。

一句話總結,作為 UI 的使用者,我可能的確感覺到了某種設計帶來的愉悅感,但是我說不出來,或者說得太不專業,讓 UI 設計師聽不懂。儘管如此,我作為使用者仍然能感覺出個大概,兩組 UI 若水平相差足夠大,我就能分辨出來。說得俗一些:【不怕不識貨,就怕貨比貨】。


所謂匠人,追求的是內心所執著的美,而非外人可以察覺的表象。

對完美產品的追求會體現在細節上,而細節的積累鑄就了產品的氣質。普通人或許不會明白每個細節的優劣,但他們能感受到設計師對美的執著。

這就夠了,不是么?


無論做什麼,細節表達誠意,這個很重要,因為誠意感動人心。你的陰影不一定會突出到被注意到,但是如果有人注意到陰影,他會發現你是有心做過的,他就會感動。所謂口口相傳的,就是這份被感動之情。


美是人類共同的追求。你覺得美。沒道理其他人覺得不美,好的UI會為你的網站加分。

中國用戶的操作習慣才是大問題,為了美觀搞很另類的操作方式會讓人很難受,這時候你必須要妥協。

比如一些重要的、提示操作的文字,有些網站追求簡約、華麗,讓滑鼠放在上面才顯示。有些用戶(比如我就很不喜歡)。這時候明智的選擇是放棄簡約、華麗,以用戶體驗為優先。


推薦閱讀:

(設計分類)想問一下大神們底圖的這種動態效果是怎麼做到的?
什麼樣的網頁配色可以讓眼睛更舒服?
從事網站建設服務,普通用戶如果問你為什麼你做網站那麼貴,而別人只要幾百塊就能做,你怎麼回答?
為什麼國內絕大多數網站使用載入圖片而非載入部分漢字字體的方式來處理 logo 和標題?
純html5+css能寫出什麼驚人的效果?

TAG:網頁設計 | 設計 | 用戶界面 | 交互設計 | 用戶界面設計 |