翻譯自一張外文圖表,出處以下:http://sixrevisions.com/infographics/69-web-design-tips/
雖然圖表裏都是很簡單的英文,但我花費一點點時間翻譯它們能使得大家很清晰明白做者的意思。web
設計階段Design:瀏覽器
一、調查(Investigate):弄明白誰是你的目標受衆和他們所指望的東西;安全
二、有限的色彩(Limit colors):不推薦在你的網站裏使用的顏色數量多於2~3個;框架
三、標誌(Logo):標誌是你品牌中主要的部分,是別人識別你的品牌的關鍵點;ide
四、文本校對(Text contrast):訪問者更想要看到正確的文本內容,而不是出錯的內容;工具
五、極端(Extremes):確保你的網站一直安全;學習
六、設計順序(Design order):讓事情按序而來;測試
七、使用網格(Use a grid):優選是使用一個12-列的網格;字體
八、簡單化(Simplicity):在你的網站應該僅僅顯示最本質的元素;優化
九、趨勢(Trends):緊隨最新的網站設計趨勢,可是不要過分使用趨勢;
十、要原創,不要買主題(Be original,don't buy a theme):你老是但願你的網站是獨一無二的;
十一、測試你的設計(Test your desings):在你將你的網站展示在你的用戶以前,先完全測試過。
用戶體驗User experience:
十二、五秒法則(Five seconds):你有5秒的時間讓用戶清楚的明白你的意圖;
1三、響應式設計(Responsive design):愈來愈多的人使用平板電腦,智能手機、電腦和手錶去訪問網站;
1四、導航(Navigation):導航是網站中最重要的部分之一,由於它指引訪客快速的去到他們想去的頁面;
1五、滾動VS點擊(Scroll vs click):滾動容許你指引你的訪客經過一個必然的故事。(這裏翻譯得不是很清楚,歡迎大牛更改:原文:Scrolling allows you to guide your visitors through a certain story);
1六、流程(The flow):向你的目標受衆提供一個清晰的網站流程使得他們不須要去想下一步作什麼;
1七、去除混亂-整理乾淨(Remove clutter):一些網站的元素一開始顯得頗有用,但僅僅是相對一些分散的訪客(不是相對主要用戶的意思);
1八、不可迴避的按鈕(Unavoidable buttons):儘量的使你網站上的按鈕精緻,有吸引力,容易引發人們注意;
1九、可讀字體(Readable fonts):確保那些網站上的字體不管在什麼設備上訪問網站都可以容易的辨識;
20、思考區域性(Think local):讓訪客明白你網站上的全部東西是你想要達成的目的(換句話說,就是來自不一樣地區的人們訪問你的網站都能明白你的網站上的東西到底在說什麼);
2一、呼吸的空間(Breathing room):訪客須要時間去消化他們所閱讀的信息,不要將下一部分的內容立刻呈現到他們面前(換句話說,在各個元素之間須要喘息的空間,使得讀者可以消化上一部分的信息再去閱讀下一部分的內容);
2二、可用的連接(Working links):確保你網站上全部的連接是可用的,包括內部和外部的連接;
2三、連接本文/錨(Link texts/anchors):在你網站上的錨點須要提供一些關於他們點擊後去到的頁面的快捷信息(換句話說,你網站上的錨點須要提供給用戶你這個錨點所去之處的信息);
2四、外部連接(External links):經過使用targer="_blank"讓你的外部連接開啓在一個新的窗口中(換句話說,不要讓你的外部連接覆蓋當前訪問頁,應該新建一個窗口,博主認爲新建一個標籤頁是最好的方法。);
2五、短的form(Short forms):儘量的少使用form fields,避免驗證碼;
2六、自動完成的form(Auto-complete forms):容許forms經過瀏覽器自動完成;
2七、接收短信息(Message received):(這條跟16同樣,正等待圖表主人的更改);
2八、聯繫信息(Contact information):添加聯繫信息在你網站中每一個form的旁邊。
內容Content:
2九、有限的頁面(Limit pages):確保你的網站不會有太多頁面,僅僅留下一些必需的頁面;
30、首頁(Homepage):首頁僅僅是一個門口通往其餘的頁面,那些纔是訪客關心的頁面;
3一、內容第一(Content is king):若是你不能清除明白的與訪客傳達你想要傳達的信息,那你的網站將會失敗;
3二、消息(Messaging):不要用大長段的文字去淹沒你的訪客;
3三、圖片(Photography):一張圖片每每能比一千字的文本表達更多的東西;
3四、視頻(Video):最好的方式之一去解釋你的產品或者裝置是一個視頻;
3五、保持新鮮(Stay fresh):給訪問者一個你的網站的印象—你的業務是一個活躍的業務,經過按期更新您的網站
3六、博客(Blog):一個博客是一個最好的方式之一去讓你的網站看起來積極,而且它能夠容許你去展現你知道你在談論什麼;
3七、社交媒體(Social media):社交媒體是一個很好的方式去產生一個忠誠的受衆,他能夠成爲你品牌的廣告;
3八、受衆(Audience):僅僅關注那些訪問你網站的目標受衆;
3九、拼寫(Spelling):無時無刻要確保你網站上的拼寫是正確的;(博主以爲這是對於英文網站來講,而對於中文網站,就是確保你的字是正確的)
40、向上摺疊(Above the fold):向上摺疊這部分的內容是你網站中最重要的部分;
4一、終頁面(Landing pages):將你的每個頁面都設計成最終頁面的樣子;
4二、搜索引擎優化(SEO):在你建立一個新網站的時候,在你的腦海裏牢記保證你的搜索引擎優化;
4三、排名(Ranking):頁面在谷歌裏有排名,而網站沒有。(博主也沒有理解該段英文意思。。。)
發展development:
4四、內容管理系統(CMS):學聰明點,別浪費時間去創建一個內容管理系統
4五、安全(SECURITY):確保你的網站一直很安全;
4六、利益(BENEFITS):一旦你不顧你訪客的利益了,那麼你以前全部的辛苦都白費了;
4七、學習(LEARN):保持學習的狀態,去學習最新的技術,工具等;
4八、研究(EXPERIMENT):開始研究新的事物,創建一個博客,經過博客去記錄你所學習的東西(像博主如今這樣);
4九、外包(OUTSOURCE):設計網站而後將代碼交給專業人士去作;
50、清潔和評論(CLEAN AND COMMENTED):這條提醒在任何工做中都有用——工做整潔而且有組織;
5一、速度(SPEED):訪客退出你的網站的最大緣由就是網站加載太慢了;
5二、圖片(IMAGES):有圖片的網站比通常的網站顯得更好看而且具備更好的親和力;
5三、特殊效果(SPECIAL EFFECTS):特殊效果每每會分散訪客的注意力,使他們再也不關注網站的內容;
5四、滾動視差(PARALLAX SCROLLING):儘可能簡單,少用;
5五、粘貼頁尾(STICKY FOOTER):頁尾須要一直在瀏覽器的底部;
將來Future:
5六、測試和更新(Test and update):一旦你完成了你的網站而且你的訪客開始找到它,沒有時間是能夠放鬆的;
5七、向別人學習(Learn from others):分析你全部的對手並向他們學習,同時對於其餘行業也是如此;
5八、領導人的方式(Lead the way):在今天,一個行業的領導者是一個懂得分享經驗和知識的著名的商業人;
5九、保持(Keep up):不論你超越你對手多少你都要保持你的在線工做狀態;
60、可穿戴技術(Wearable tech):你的品牌和商務也許將會從一個新的技術中獲利,因此保證你的網站作好準備。
別作這些Don't do this!
6一、FLASH(Flash):不管你想用什麼建立一個FLASH,使用普通的老的HTML,CSS和JS;(我也沒明白。。。)
6二、忽然冒出忽然消失(Pop ups and pop unders):這會惱怒大多數人;
6三、自動播放(Auto play):當訪客沒有對其進行操做時,視頻和音樂卻自動播放了,這一般會令人惱怒;
6四、廣告(Advertisements):每一個頁面不要使用超過3個廣告,這會使得訪客注意分散而且所以惱怒;
6五、輪播和滑塊(Carousels and sliders):輪播圖片會讓訪客以你想象不到的速度點擊後退按鈕;
6六、老技術(Old tehniques):花費更多的時間在弄明白HTML5和CSS3的基礎技術上,不去使用一個框架和表格;
6七、GIF圖片(GIF’s):這是個好東西,但別用在不應用的地方;
6八、大寫字母(CAPS):這讓訪客以爲你在對他們尖叫;(意思就是,在內容中不要用全大寫,會讓人有壓力)
6九、下劃線(Underline):僅僅對連接使用下劃線,對於通常的詞和句子不要使用。
博主語:你們若是以爲我翻譯不許確的能夠在評論給出合理的翻譯,我會虛心學習並將其更改的,謝謝~