技術(shù)資訊
網(wǎng)站技術(shù)之網(wǎng)頁設計原則
2016-08-05 14:49:00
網(wǎng)站伴隨著互聯(lián)網(wǎng)的快速發(fā)展而快速興起,作為上網(wǎng)的主要依托,加上使用網(wǎng)絡的頻繁而變得非常的重要。企業(yè)需要通過網(wǎng)站呈現(xiàn)產(chǎn)品、服務、理念、文化,或向大眾提供某種功能服務。青島網(wǎng)頁設計必須首先明確設計站點的目的和用戶的需求,從而做出切實可行的設計方案。
今天抽空來說說大家比較關心的問題,就是所謂的設計原則。很多人把設計原則都想得很復雜,還別說,它真的挺復雜,但是對我來說它就是四點:
清晰
流暢
統(tǒng)一
美觀
重要性也是按這個順序來排列,那么下面我們一點點來說說。
清晰
何為清晰?對任何產(chǎn)品而言,界面“清晰”是最為重要的一點。人們必須能夠辨別出它是什么,才能有效地使用你設計出來的產(chǎn)品。而在設計的過程中相信大家經(jīng)常會被產(chǎn)品的需求搞得蒙圈,最后出來一個亂得連自己都會吐槽的界面。設計師在設計產(chǎn)品時,真正要做的應該是去關心用戶使用產(chǎn)品的原因,去預測并觀察用戶使用產(chǎn)品時的行為然后快速做出反饋。
產(chǎn)品在設計之初就應該定位清晰,明確自己的受眾群體,設計出符合目標用戶的產(chǎn)品。這樣才能留住用戶,讓用戶對產(chǎn)品更有期待。
但是每類應用的需求不同,受眾群體也不同,所以每個設計師在設計產(chǎn)品時都會糾結(jié)怎么把產(chǎn)品做到清晰。比如攝影產(chǎn)品,打開就是快門和取景框,相信大家都懂得怎么用,這類工具類應用很簡單的就能做到清晰。再說社交類應用,微信打開界面大家都能知道聊天框和標簽欄的作用,這類產(chǎn)品說難也不難,畢竟同類產(chǎn)品還是很多的。其實最難做好的,還是購物類應用,不知道為什么,這類產(chǎn)品總是喜歡把界面元素設計得又多又亂才肯罷休,可能是我們的文化背景和生存環(huán)境導致的吧。但是話說回來,這么多類應用都要根據(jù)自己的產(chǎn)品定位來設計,每個產(chǎn)品定位的清晰性都是不同的。
所以要做到產(chǎn)品設計清晰,必須讓目標用戶在符合產(chǎn)品條件的基礎上,去正確的理解產(chǎn)品界面。不需要思考就對界面的設計有所了解;或者是讓用戶通過產(chǎn)品簡單的提示或幫助說明,就能夠理解產(chǎn)品界面,并進行使用。
要做到這點就要讓用戶知道自己目前處于什么位置,并知道自己能干什么或要干什么。其實這些說起來很簡單,但是要做到卻并不容易,所以對用戶的研究必不可少,讓產(chǎn)品定位精準,明確目標用戶等等,都是非常重要的步驟。這也是為什么清晰是產(chǎn)品設計原則中最重要的原因。如果能做到這點,即使頁面再多,也不會讓用戶覺得不知所措。(當然頁面數(shù)量還是有點影響的)
流暢
在保證了產(chǎn)品界面清晰的前提下,界面的流暢性可以讓用戶和產(chǎn)品之間產(chǎn)生良好的互動。一個優(yōu)秀的產(chǎn)品,在用戶使用的過程中不僅不需要復雜的學習就能使用,而且還能高效的使用。
如何保證流暢性?很簡單,就是突出產(chǎn)品的核心。
我們生活在一個快速發(fā)展的時代,做任何事情都容易被打擾,導致過程中斷。所以想要留住用戶,必須讓用戶沒有負擔且?guī)椭脩艨焖偻瓿扇蝿铡_@樣才能贏得用戶的尊重。
想必所有人都在網(wǎng)上買過東西,不說遠的,就說說外賣。每當我們打開一款外賣App看到最多的永遠是商家吧?這些商家的排序是從距離最近的到距離最遠的,然后排除無法送達的。其實我想說:用戶會關心距離遠近么?不要每次讓用戶打開你們的App時都是出現(xiàn)一樣的排序,記住用戶點餐時商家的記錄以及篩選出類似的商家排在前面才是用戶關心的。這樣不至于每次打開App都要去重新搜索或翻半天記錄或者是找訂單。如果用戶記不住商家名稱呢?如果用戶不想點這家的但是想點同類的食物呢?
保持使用流暢的另一個說法就是高效。讓用戶快速的完成任務,才是App存在的理由。也不要以為用戶點了下單就不想刪減購物車的東西,留個路口讓用戶刪減多余的商品而不是返回去重新操作。
流暢不是讓用戶別無選擇的去執(zhí)行你設計的任務,而是引導用戶去做正確的選擇。不要害怕讓用戶掌握一切,也不要覺得你的設計就是顯而易見,這世上從來沒有顯而易見的事情存在。
統(tǒng)一
讓頁面保持一致性。很多設計師在設計產(chǎn)品時,都會把統(tǒng)一性拋之腦后。統(tǒng)一性在設計過程中至少要做到:視覺、交互、結(jié)果統(tǒng)一。這樣不僅可以降低用戶學習成本,還能讓開發(fā)節(jié)省不少時間來做那些必要的東西。
經(jīng)常有人會問一些關于界面設計的問題。而發(fā)出來的界面很多時候都是前后不統(tǒng)一,上個界面的下一步還在左邊,到了下個頁面就到了右邊了,問他原因就說:這個界面的排版這樣放更好看點。其實這樣的回答很不專業(yè)。
在做產(chǎn)品時,統(tǒng)一性是非常重要的,它是清晰和流暢的結(jié)果,要求做到自然而然的效果。能夠通過巧妙的布局,來降低用戶的認知負擔。相信大家都聽過一句話:好的設計都是看不見的。這里說的不是真的看不見(要真看不見還搞啥),而是說讓用戶察覺不到它的存在是多余的。要做到統(tǒng)一不僅要做到均衡的構(gòu)圖,讓畫面整體具有穩(wěn)定性,還要透出空間感,不會使得用戶覺得在使用的過程中產(chǎn)生擁擠的念頭。而創(chuàng)新并給用戶帶來驚喜就是后話了。
美觀
其實美觀沒什么好說的,因為每個人對它認知是不同的。新人覺得美觀是把一個界面做到漂亮;而資深設計師就知道美觀是讓界面的設計無瑕疵,整齊,細節(jié)完美。
簡單來說說美觀的幾個方面:
文字:一個界面要做到信息閱讀流暢,符合人們閱讀習慣。
顏色:不要為了突出設計感,就采用夸張的顏色來設計,有時候簡單的搭配反而更能體現(xiàn)出產(chǎn)品的功能。
圖標:大家都說一個交互設計師的功底是看交互設計文檔,那么一個UI視覺設計師的功底看什么呢?沒錯,就是圖標。
布局:有時候一個界面的布局好壞不能完全看交互設計師,這里面視覺的設計至關重要,即使做得再爛的布局都是可以通過視覺設計師來逆轉(zhuǎn)乾坤的(不包括搗亂的那些孩子)。
再提一個點,動效,當然動效也屬于美觀中的一種。近年非常流行動效,很多設計師沉迷其中,然后在自己的產(chǎn)品中加入各式各樣的動效。其實,動效是是一把雙刃劍,這里也不詳說了,大家有需要我可以單獨出一篇動效的文章。只要在設計的過程中把控好度,動效是可以起到美化產(chǎn)品的作用的。
總結(jié)
設計絕不是簡單的拼合,排列甚至編輯;設計是通過闡明,簡化、明確、修飾,使之莊嚴,有說服性,甚至帶一點趣味性,來賦予其價值及意義。說完上面這四個原則,大家可以聯(lián)系自己的產(chǎn)品去想想是不是這么回事。清晰>流暢>統(tǒng)一>美觀,一個好的產(chǎn)品一定是按照這個順序來設計產(chǎn)品的。在做設計之前一定要理解需求再下手,如果你的界面已經(jīng)滿足需求,就不要再加入其它元素了,千萬不要覺得頁面太簡單東西太少,我就要加入其它東西來充實,這樣很傻。
如果之前沒有考慮到這四個點來做設計,那從現(xiàn)在開始好好想想自己應該怎么入手。
清晰,理解需求;流暢,明確用戶目標;統(tǒng)一,界面元素保持一致;美觀,做到簡約而不簡單。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設公司,高端網(wǎng)站定制,一站式網(wǎng)站服務——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設——從滿足預期到走向卓越
- [2023-04-11 09:17:49] H5頁面設計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設最容易忽略的人性化設計
- [2020-12-16 16:55:32] 建設一個常規(guī)的公司網(wǎng)站建設成本大概是多少?
延伸閱讀
- [2009-03-11 22:34:00] 交互設計文檔-4:Axure交互實例
- [2009-04-19 08:40:00] 交互設計方法論 2.0探討
- [2016-10-15 09:32:00] 2016年主流網(wǎng)頁的設計風潮
- [2012-06-18 14:21:28] 青島網(wǎng)站設計如何突出網(wǎng)頁核心內(nèi)容
- [2008-10-13 08:24:00] 用戶體驗:如何塑造網(wǎng)站品牌?
- [2009-03-09 08:45:00] 如何平衡用戶體驗與數(shù)據(jù)的關系?
- [2021-01-08 17:28:04] 網(wǎng)站建設最容易忽略的人性化設計
- [2012-12-19 22:31:27] 網(wǎng)站制作中的交互設計
- [2008-07-02 11:53:00] 從網(wǎng)頁設計到UI設計—重在設計理念的轉(zhuǎn)變
- [2011-11-10 00:29:06] 青島網(wǎng)站設計中如何增強網(wǎng)站的SEO優(yōu)化 提高排名
- [2012-05-03 17:58:58] dede列表頁調(diào)用正文
- [2012-11-20 19:50:06] DEDE給當天發(fā)布的內(nèi)容加上new
解決方案
輪胎行業(yè)網(wǎng)站設計解決方案 機械行業(yè)網(wǎng)站設計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設計解決方案 科技企業(yè)網(wǎng)站設計解決方案 電子家電網(wǎng)站設計解決方案 食品行業(yè)網(wǎng)站設計解決方案 集團公司網(wǎng)站設計解決方案 企事業(yè)單位網(wǎng)站設計解決方案 外貿(mào)行業(yè)網(wǎng)站設計解決方案 健身運動網(wǎng)站設計解決方案 美容與化妝品網(wǎng)站設計解決方案 建筑設計行業(yè)網(wǎng)站設計解決方案 物流行業(yè)網(wǎng)站設計解決方案
TAGS關鍵字
網(wǎng)站設計趨勢 插畫 營銷策略 H5定制設計 H5 青島高端網(wǎng)站建設 網(wǎng)站品牌 輪胎網(wǎng)站設計 營銷型網(wǎng)站 微官網(wǎng) 海信網(wǎng)絡科技 交互設計 網(wǎng)頁設計 網(wǎng)站交互設計 集團官網(wǎng) 高端輪胎網(wǎng)站設計 審美 力圖數(shù)字科技 企業(yè)建站 網(wǎng)站動畫 色彩心理學 微網(wǎng)站 H5專題頁面 企業(yè)網(wǎng)站為什么要備案 頁面設計 官網(wǎng)建設 青島抖音小程序開發(fā) 中小型企業(yè)網(wǎng)站建設 網(wǎng)站視覺 青島網(wǎng)站優(yōu)化