如何設計合理的詳情頁？

05-22

如何設計合理的詳情頁？

2個方面：閱讀邏輯和視線引導

1.閱讀邏輯

原理：

看橫向文字，從左往右；看豎向文字，從上往下；換行，從上往下；
視線的移動：橫排，從左上角到右下角的移動；豎排，從右上角到左下角的移動。

提高文字的閱讀性：

無論橫排還是豎排，文字之間的距離都應小於行距。

添加圖片的注意事項：

圖片的出現不可以切斷文字的流向。

如果文字的流向被圖片打斷，就會出現不知道下一段文字在哪裡的情況。

建立信息層級：

想要在短時間內傳達信息，就要將信息合理拆分，按照一定順序依次呈現出來。
最重要的信息在最上面，以下信息的重要程度性依次遞減。

如下圖，在布局上的調整，遵循閱讀邏輯的走向，保證文字的可閱讀性，標題放置在重要位置。視覺導向：先大圖-小圖-標題-文字。

視覺的心理：

最初被捕捉視線的是具有視覺性的圖片，不管在什麼位置出現，人嗎都會優先被具有視覺性的元素吸引。

1.創造焦點：

畫面中的焦點，是視覺的入口點；是版面中首先被識別到的元素；是版面中的視覺重心。

2.引導視線：

眼睛看事物時，會按照一定的順序進行移動。
受「大小、顏色、編號、指向、線條」影響。
1.大小。第一眼看面積最大的物體，之後會移向第二大物體，視線會按照從大到小的規律移動。

2.顏色。暖色比冷色相更容易吸引視線；純色調比暗色調更能引起眼睛的注意。
3.編號。看到1，會想到2。
4.指向。視線會跟隨如箭頭或模特的手勢、臉部的朝向等等具有指向性的元素移動，特別是人臉的朝向，如果版面中人物觀看的方向與想傳達的內容位置相反，讀者的目光將被吸引到與內容相反的方向。
5.線條。線條具有引導讀者視線和增強元素間關聯的特性，橫線-從左向右；豎線-從上到下；曲線-柔美感；斜線-不穩定動感。

3.鎖定視線：

在角落設計一個遮擋元素，視線會像彈球一樣被彈回版面中。
在版面的兩側添加元素也會有同樣效果。
只要有一個遮擋元素，視線就會被鎖定在畫面中。
通常會使用LOGO或優先順序不重要的文字作為點綴元素。