原作者:jeremy thomas
短小精悍的文章,網(wǎng)頁設計的重點要點都講到了,可以視為設計原則,這列清單絕對實用!
建議可以看一下原文,在閱讀的交互上也頗有趣~ ?下面便是譯文:
讓我們假設你有一個產(chǎn)品,一個投資組合,或者僅僅是一個你想要在自己的網(wǎng)站上與大家分享的想法。然而,在你將它發(fā)布在互聯(lián)網(wǎng)上之前,你想讓它看起來有吸引力,專業(yè),或者至少足夠體面。
你需要做的第一件事是什么?
內(nèi)容
設計的目的是去美化或者豐富你的內(nèi)容。這可能聽起來很明顯,但內(nèi)容是一個網(wǎng)站的主要元素,它不應該成為一個事后的想法。
文字內(nèi)容,比如你正在閱讀的段落,就已經(jīng)占據(jù)了90%以上的網(wǎng)頁。文本內(nèi)容的樣式仍有很長一段路要走。
讓我們假設你已經(jīng)構(gòu)思好了你想發(fā)布的內(nèi)容并且創(chuàng)建了一個空的css文件,你可以寫第一條規(guī)則是什么?
制定中心
長文章通常比較難以解析,因此閱讀起來也會比較困難。因此,設置每行的字符限制則大大增強了文本的可讀性和吸引力。

給文本塊設置樣式之后,文本自身呢?
字體
瀏覽器的默認字體為“Times”,這可能看起來缺乏吸引力(主要是因為它是“無樣式”字體)。切換到一個無襯線字體像“Helvetica”或“Arial”可以大大提高頁面的外觀。

如果你堅持想用一個襯線字體,嘗試“Georgia”。
這不僅可以使文本更吸引人,也使它更具可讀性。
間距
當讀者看一個頁面而感覺到“破碎”的時候,那就是間距上出現(xiàn)了問題。在文本間和文本內(nèi)創(chuàng)造適當?shù)目臻g可以提高你的頁面吸引力。

整體的布局到目前為止已經(jīng)得到了很大程度的提高,接下來我們可以創(chuàng)造一些更加微妙的改變。
顏色和對比
白色背景上的黑色文字會造成眼睛的疲勞,選擇擁有更加柔和陰影的黑色字體可以讓閱讀更加舒適。

為了保證一個不錯的對比,讓我們選擇重要的內(nèi)容添加更暗的色相

到現(xiàn)在為止頁面上的視覺已經(jīng)得到了大幅的提升,然而一些元素(如代碼片段)似乎仍然不合適。
平衡
只需要一些額外的技巧來使頁面達到平衡

此時,你可能想讓你的頁面突出并且給他以身份
原色
大多數(shù)品牌都有一個原色(主色)作為視覺符號。在網(wǎng)站上,這種視覺符號的運用可以強調(diào)交互元素,比如鏈接。

次要顏色
我們可以用一些更為微妙的色調(diào)來補充我們的主色,將它運用在邊界,文本,或者甚至是文本

既然已經(jīng)改變了顏色,為什么不嘗試著改變形狀
自定義字體
因為文字是頁面的主要內(nèi)容,自定義字體可以讓你的網(wǎng)頁的身份更加明顯。
你可以嘗試使用自己的網(wǎng)頁字體,或者使用像Typekit這樣的在線服務,這里使用來自谷歌的免費字體服務“Roboto”

通過文本提升了你的身份特征之后,要如何添加上千的字呢
圖片
圖標和圖標可作為裝飾物來支持你的內(nèi)容,或者有效的幫助你表達出你的內(nèi)容。
可以從 Unsplash 這個網(wǎng)站獲取一些漂亮的背景圖片來豐富你的內(nèi)容

添加logo

同時提高文本樣式

在幾分鐘內(nèi)我們根據(jù)網(wǎng)頁設計原則已經(jīng)設計了一個像樣的網(wǎng)頁了!