從技術角度講，作為一個前端開發人員，怎樣才能寫出讓人眼前一亮的前端頁面?

01-14

首先不要假設「眼前一亮」是一個技術問題，技術只是一部分，更多的是設計和開發者的品位。

學會站在巨人的肩膀上

尋找巨人的肩膀，用那些讓你眼前一亮的工具，庫，模式，揣摩它們的思想，掌握它們，把它們納入自己技能樹。這些東西並不難找，但需要你刻意，比如說用bootstrap（這只是一個例子，不要當成標準答案），大家都是用，但90%的人也只是用，不會去用它的個性化生成工具，不動它的變數，所以用一次和用十次的區別沒有本質差別。他們在巨人的肩膀上站了一會兒，然後又下來了。像這樣的一個庫，真正融匯貫通，足夠讓絕大多數項目眼前一亮了。

學習設計，UX，有全局觀念，但也重視細節

從編程狹窄的領域裡走出來，學慣用戶行為，交互設計。從產品的角度，真正的眼前一亮是設計驅動，而不是代碼驅動的，代碼只是實現。只停留在代碼的實現上考慮問題，設計一定是滯後的。有設計品位的前端，才能明白產品的標準意味著什麼，視覺只是一個部分，不懂設計，不懂交互，就沒有全局意識。

充分訓練

寫很多東西，哪怕是很爛的東西，每一個工具，庫，設計思想，都需要在實踐中貫徹，沒有捷徑。如果你不打算多年實踐，這個問題問了也毫無意義。

你可以用亮一些的配色

沒有對比就沒有傷害。

舉個移動端聊天網頁的例子。

淘寶移動網頁聊天版：丑的不能再丑、卡的不能再卡，色彩單調的不能再單調；

京東移動網頁聊天版：簡潔美觀、流暢性很好、色彩搭配合理。

鏈接我就不發了，你們網上都能搜得到。

再說說京東app最近搞出來的一個小咚機器人，如果把這個機器人的交互和設計搬到網頁版，你說是不是可以打個更高的分數呢？

產品爛，就會設計爛，設計爛，就會前端爛；

當然，最可能的事實是前端爛。。。

如何讓UI和UX設計出讓人眼前一亮的界面，需要高超的技術。因此，你可以提升溝通、管理、協調、輔導、教練、激勵、反饋、讚賞等技術，以便完成這個艱巨的任務。

讓用戶眼前一亮，一般情況下都是設計和交互的鍋，

如果遇到動畫之類的。那就得看流暢度了，涉及性能優化啦，這個就得看開發人員。

當然，像我這種會打開開發者工具看別人頁面的用戶，讓我眼前一亮，還得做好標籤語義化，嵌套合理，樣式優雅。

把這張圖放頁面上，亮瞎絕對沒問題

瀉藥。

前端頁面要亮，而且是寫出來，

#ffffff

不能再亮了。

不扯了，認真回答：

頁面要靚，簡單說兩個有效提升方案。

1，把全部中文換成英文Arial9號，如果必須要用中文，換微軟雅黑10號顏色#f6f6f6，頁面大面積出現的顏色換成灰系或粉系；

2，高精度大圖，以老外人物，物件局部，微距這種圖為主做banner大圖。別考慮流量。

最後補一句：
不要過分考慮細節。

如果要真正自己獨立設計精美前端，十年平面類底子不能少，攝影功底不能弱，HTML要懂，還得幾年與產品業務交流經驗，這種就是另外的話題了。

------我的微信，做點自己的小事------

微信號：shuangziruguoai

http://u.wechat.com/EDIypK2wxzThVluB-H8oVEM (二維碼自動識別)

我理解的「眼前一亮」，包含了幾層：

1. 「視覺衝擊力」的第一亮。

2. 「互動效果」的第二亮。

當然了，這些是顯性的，深層可能還包括「頁面內容」的第三亮（也許是最重要的亮）。站在形式是為內容服務的角度來看的話，作為一個前端人員，能做的比較多的就是展現這個形式了。

比如：

一. 精確的還原設計稿（假設設計稿本身就讓人眼前一亮）

二. 打造符合氣質的交互形式。

2.1 交互動效要符合內容氣質（非常重要），形式是內容的外在表現嘛，舉個栗子：比如你頁面是關於太空內容的，但是交互又給人拖拖拉拉軟綿綿的感覺，顯然就不符合太空酷酷的氣質了。。

2.2 文字的氣質也要凸顯內容/主題。

舉個栗子，如下圖：

Air 三個字母的字體明顯比macbook 細，凸顯了 Macbook Air 的輕薄感。

又例如：Mac mini ，注意mini是小寫的，並沒有延續apple 命名的首字母大寫，為啥呢，因為是mini ，小。可以感受一下： Mac Mini vs Mac mini

三、從技術的角度講，作為前端開發人員，如果視覺設計的足夠好，努力高還原，再加上自己碉堡優雅的動效，可能會讓人眼前一亮。但…… 呵呵。

某天你打開12306，突然蹦出來一個訂票返程免費，你會不會眼前一亮?

頁面能讓人眼前一亮，這跟前端有多大關係？好的前端應該是能忠實還原設計師的設計，用最優的技術實現設計師的意圖。

Designer要什麼就能弄出什麼。

整體一氣呵成，產品素材高大上。設計元素貼合實際。所以在設計前端的時候需要分析行業的特點。和面對客戶的需求。

想要眼前一亮還是得靠設計，然而大多數程序員是沒有審美的，所以常常費了不少勁做出來的東西無人懂得欣賞，只有自我陶醉。

so 單靠技術是不現實的

我們的追求是寫出這樣的頁面:

1.頁面結構清晰，層次分明，重點突出;

2.動效，交互切換縱享絲滑;

3.色彩和諧，然後具體配色跟頁面風格有關;

4.設計和交互符合人的使用習慣

這些做到了，頁面會普通么？

如果從前端的技術代碼當面來說的話，更讓人眼前一亮的絕逼是代碼的拉風風格，而不僅僅是設計的效果！一個好的前端如果只能出設計，不能實現，或者是實現代碼不風騷，那我想這個前端一定會走上設計師的道路而非前端。就比如說我有位代碼大牛級別的朋友，路過，（網名）他是不折不扣的程序猿，但也寫的了一手好前端，設計美感也差點就追上我了（自戀下，勿噴）他的理念很簡單，不管是前端還是程序，一句話能搞定的覺不用第二個字母，當然對於懂前端代碼的人都有個習慣，就是看到漂亮網站一定會f12一下，看下代碼怎麼樣。（有木有中呢？）

再來舉個例子。12306，當時這個網站進入大眾眼裡時，吵的風風火火的，各種吐槽，各種抱怨，不過今天不是說這個的，而是說當時這個網站改版後用的jquery插件，就是網上大話主席的jquery插件，不過現在還有沒有在用就不清楚了，反正當時是用了，那麼這麼多的jquery插件為什麼偏偏選中大話主席的呢？這就是讓人眼前一亮的感覺吧！！！有興趣的自己下載玩玩這個插件，很可能讓你眼前一亮～

body { background:#000; color:#fff }

背景用黑色，內容用白色，那才是最亮的啦～

顏色搭配的舒服，效果什麼的牛逼，能蒙住人

去dribbble或者behance找頁面實現裡面有些有psd源文件你的ps足夠可以的話一張圖片就行

CSS3動畫加幾顆閃爍的星星??

能用圖片盡量不要用文字。能用矢量盡量不要有碼。mousewheel mouseover mouseout 的特效一定要屌氣。

最後就是，你這問題跟:「如何寫個牛逼的app？」有什麼區別？

個人觀點，我是設計轉的前端，我覺得前端頁面能不能讓人眼前一亮跟前端開發人員本身並沒有多大關係，我的工作經驗是設計負責頁面的總體布局、配色、動效、交互設計和響應式設計等，而前端負責把設計師的設計稿實施為網頁，當然，實施的過程中可能會與設計師探（撕）討（逼）頁面的細節，但對頁面的整體影響不大，至於頁面的實現方式，用了什麼「奇技淫巧」，代碼兼容性、擴展性，代碼結構、代碼可讀性啥的，客戶又不會f12，你寫出花來也不會讓他們眼前一亮