地址: 上海市靜安區共和新路4718弄10號樓2樓
熱線:400-166-3538
電話:19301461038
郵箱:sales@shyuanzhen.cn
相匹配原則。盡管動畫設計的外在表現形式有很多種, 比如絢麗多彩浪漫溫馨等等, 其必須與網頁所要表達的主題出發, 不能只追求動畫的復雜和絢麗, 要與主題相一致, 起到服務于主題的作用。
比如, 在對紀念性的網頁設計時, 比如設計紀念盧溝橋事變80周年的網頁, 主題是中國人民要勿忘國恥, 并表達對抗戰中犧牲的英雄的沉痛哀悼, 因此網頁中的動畫設計就不應該太過鮮艷, 同時可以將蠟燭火苗的動畫設計在網頁中, 利用暗淡的燭光, 來表現沉重的心情, 同時動態的燭光也可以增加真實感。
隨著智能手機占據手機的主要市場, 人們使用手機上網已經越來越普遍, 但針對手機平臺設計的網頁卻只是互聯網網頁中極小的一部分。手機屏幕的尺寸不足一般計算機顯示器的1/20, 用手機瀏覽普通網頁不但浪費數據流量, 而且視覺效果極差, 使得手機上網成為一種令人不太愉悅的體驗。據統計, 至2010年世界上有26%的人使用網絡, 68%的人擁有手機, 但卻只有不足4%的人使用手機上網, 除使用習慣的因素之外, 手機平臺網頁缺乏科學規范的設計也是制約其發展的重要因素之一。
目前市場上手機品牌和種類繁多, 使用手機上網的效果也有很大差異。影響手機上網體驗的因素主要有屏幕尺寸、分辨率、橫屏/豎屏、交互模式 (按鍵/觸屏) 、無線帶寬等, 本文主要討論手機媒介網頁的版式設計問題。
1 目前手機網頁設計中的問題
1.1 網頁與手機屏幕不匹配
目前市場上的手機型號達3 000多種, 手機屏幕類型多樣, 尺寸從1.5英寸到3.8英寸不等, 分辨率更是從240×320到854×480像素不等, 除此之外還有豎屏與橫屏等差異。手機網頁需要根據不同的手機屏幕尺寸與分辨率進行設計, 即使不能針對每一種類型, 一般也應針對三四種主流屏幕進行設計。而一些沒有專門針對手機進行設計的網頁, 完全依賴瀏覽器自動轉換屏幕尺寸, 往往會導致文字錯行、頁面雜亂, 甚至根本無法閱讀。
1.2 網頁缺乏設計
手機網頁由于受屏幕尺寸的限制, 設計風格往往趨于簡潔。然而簡潔不等于簡單甚至沒有設計, 有些網頁一味追求頁面元素簡單, 僅以文字鏈接進行導航, 而刪除了一切認為不必要的圖片、圖標、色彩, 致使整個網頁成為了帶有鏈接的文字的堆砌;或者雖然使用了圖片與色彩等元素, 但完全忽略了用戶的使用及心理需求, 整個頁面缺乏設計感。
1.3 色彩應用缺乏規劃
對于手機網頁的設計師來說, 要在如此小的幅面中規劃好色彩是非??简灩αΦ?。缺乏經驗的設計師要么把手機網頁的色彩設計得過于簡單且缺乏變化, 難以挑動用戶的視覺神經;要么把繽紛的色彩堆砌在狹小的空間里, 讓人目不暇接。
1.4 字體應用混亂
文字除了傳遞其字面意義的信息之外, 還能表達字面內容以外的信息。文字的字體、大小、字距與行距等, 無時無刻不在向用戶傳遞著信息。例如, 標題文字通常會比正文字號更大、字體更粗, 若把關系弄反了, 就容易導致讀者的困惑。一幅頁面中的字體也不宜太多, 過多的字體會使頁面雜亂無章。
1.5 載入速度緩慢
手機的下載速度與計算機是不一樣的, 同一幅頁面, 通過計算機查看或許是沒有載入問題的, 但在手機上查看卻可能產生極大的干擾。頁面中過量的圖片、視頻、廣告會嚴重影響網頁的載入速度, 最終導致用戶的流失。
1.6 手機網頁與計算機網頁缺乏統一性
許多在計算機網頁中可以使用的設計元素, 由于受手機設備的限制而被屏蔽在頁面之外。刪減圖片、視頻等大量內容, 雖然使網頁在載入及視覺效果方面都運行良好, 但還會產生一個嚴重的問題, 即手機網頁與計算機網頁缺乏統一性, 令人無法在二者之間建立聯想。
2 手機網頁與計算機網頁的關系
2.1 手機網頁是計算機網頁的延續
手機網頁雖然與計算機網頁的應用平臺不同, 但二者卻應保持一定的延續性, 手機網頁不能完全拋棄計算機網頁的元素另起爐灶。
首先, 出于企業形象一體化設計 (VI) 的原則, 計算機網頁中企業標志、標準色彩、標準字體等元素在應用上都有具體的規定, 目的就是保持企業形象在各種情況下的視覺統一性, 手機網頁在使用這些元素時也應當遵循相關使用規范。
其次, 對于VI中沒有要求的元素, 如網站的整體色調、按鈕圖標、表單、分割線等, 手機網頁也應與計算機網頁保持一致, 以便讓用戶在使用手機上網時快速找到平時用計算機上網的感覺。這樣既有利于用戶迅速建立品牌認知, 也能夠形成親切的視覺體驗。
再則, 從用戶使用的角度來說, 手機網頁對計算機網頁具有延續性能夠使用戶在二者之間架設橋梁, 幫助用戶把對計算機網頁熟悉的認知轉移到手機網頁上, 從而快速了解手機網頁上各個板塊的內容, 并掌握各功能區域的使用。
2.2 手機網頁是計算機網頁的重構
由于設備硬件條件、使用環境等各方面的差異, 手機網頁不能照搬照抄計算機網頁, 而必須把計算機網頁上的元素拆開后進行重組, 就像是視覺設計中的打散重構。一方面, 由于屏幕尺寸的限制, 手機網頁要通過調整頁面的構圖與各元素的比例, 使頁面重點突出、清晰可讀、方便易用。另一方面, 手機上網具有鮮明的“碎片化閱讀”特征, 用戶在乘車、開會時利用短暫的空閑時間上網, 與平時在計算機前上網的需求、心態都不相同, 一般借游戲娛樂打發時間或查找地圖等, 因此, 在內容安排上, 手機網頁也要作出相應調整。例如, 百度的手機網頁把“小說”放到菜單的第二位, 而把“貼吧”、“知道”、“視頻”等互動性、知識性或占據網絡資源較大的內容整合進“更多”菜單中。
3 手機媒介網頁的版式設計原則
3.1 簡潔、“少即是多”原則
手機最大3.5英寸的屏幕使得簡潔成為手機網頁設計的必然要求。在這狹小的方寸之內, 根本沒有足夠的空間來進行煩瑣的設計。所謂簡潔, 不單是指空間安排不擁塞, 同時還包含版式的單純和圖形形態的簡練概括。就手機的屏幕寬度而言, 網頁一行字數的上限為14個中文字符, 這個寬度只能縱向分成一欄, 因此手機網頁的版面結構較為簡單, 呈現垂直瀏覽的單列布局。另外, 尺寸的限制使用戶難以觀察到網頁中的微妙細節, 所以圖形不宜太復雜, 而應以簡潔為主。簡潔的網頁能夠使用戶保持對頁面的專注力, 讓人對頁面的內容一目了然。而花哨的背景與不當的留白會給頁面增添視噪, 干擾用戶的閱讀。
3.2 易用性原則
在美觀的設計與易用性發生沖突時應該如何選擇?對于手機網頁來說, 答案是非??隙ǖ? 即易用性要比設計感更重要。有時為了網頁的易用性不得不犧牲部分設計感。例如, 由于手機屏幕有限, 手機網站不便于像計算機網站一樣在每一頁面都重復設置網站主導航, 以免主導航占據過多的空間, 導致用戶在屏幕上向下滑動很遠才能看到當頁的主要內容。此外, 手機網頁中應只顯現最精華的內容。手機屏幕非常小, 要確保網站正確識別手機發送的請求, 并且提供最精華、最簡潔的內容, 否則重要的內容將被擠到網頁下邊或很難被發現。
3.3 信息扁平化原則
保持手機網頁的易用性還意味著應避免不必要的交互, 所以在設計中應堅持網頁信息的扁平化原則。從登錄網頁到找到所需信息, 其間的步驟越多, 帶給用戶的不便也就越多。手機客戶端沒有像計算機網頁那樣操作方便的導航方式, 如目錄、樹狀導航和面包屑等, 若要跳轉到其他內容頁面時, 就必須一層層返回上級菜單, 再逐層進入子菜單, 這樣會導致跳轉界面非常復雜。因此, 每跳轉一次界面都會造成用戶數量的損失。扁平化的信息構架就是首頁和內容頁之間的垂直訪問, 不需要有間隔層次。
3.4 少用圖原則
應用圖片能增加網頁的美感, 適度地使用大圖能使頁面顯得大氣時尚。但對于手機網頁來說, 在目前的網絡技術條件下, 使用圖片要相當謹慎, 圖片不但會增加文件的數據量, 拖慢頁面載入速度, 還會占據過多的頁面空間, 導致頁面上提供的有用信息減少。尤其手機網頁的背景圖, 當與文字重合時會影響文字的閱讀, 因此成為手機網頁設計中的禁忌。
網站想要提升用戶體驗有很多方法,人機交互內容就是其中之一。在前些年,由于一些技術的限制,導致這一內容的添加具有很大的困難,但現在隨著各項技術的興起,人機交互的設計已經不存在很大的障礙,很多網站的人機交互方面做的非常完善且的題,這可以為網站的營銷帶來極大的幫助。但值得注意的是,人機交互并不是一個只有正面作用的事情,事實上,如果處理不當,很可能會帶來一些負面的影響。我們認為,人機交互既然作為一項提升用戶體驗的設計,那么就一定要基于用戶體驗來設計。
一、人機交互在設計時應注意交互效果不是越多越好
很多人在進行一項操作時往往會簡單的選擇大量的堆砌,如SEO優化過程中對于關鍵詞的堆砌。在交互設計時,也往往會出現這一現象。一些交互人員可能由于主觀的認為,更加絢麗的鮮果就可以讓網站給用戶帶來良好的觀感,所以會將交互效果制作的十分復雜,或者說是效果的簡單堆砌。但其實對于用戶而言,這樣的設計并不一定能夠帶來良好的體驗,雖然可能大部分用戶對于密密麻麻的大段文字不感興趣,但這并不意味著他們能夠接受過多或是過于炫技的美術效果。
交互設計的初衷是讓用戶獲得更好的觀感,也可以讓頁面顯得更加生動,但如果美術效果過多,就會在很大程度上影響用戶的視線,甚至會造成眼花繚亂的效果,同時也會讓用戶無法集中注意力于網站的中心內容上,如果交互設計做成這樣,那么很難說這是一個成功的設計。
二、頁面交互應與營銷相配合
提升用戶體驗的直接目的其實就是為了提高網站的轉化率,所以在交互的設計時也應該與營銷相配合以達到提高轉化率的目的。如果能夠將網站上的重點內容做好交互,無疑就可以讓用戶更加關注這些你想讓他們看到的東西。比如在線客服等功能,就可以通過一些精巧的設計引起用戶的關注,來引導他們點擊。
另外,如產品展示環節,也可以通過精美的交互設計來吸引用戶的注意力,讓他們對你的產品產生濃厚的興趣,這也可以給用戶留下非常深刻的印象??偠灾?,單純的交互設計的作用并不明顯,一個優秀的交互設計應該達到的效果是有效的提高網站的轉化率。只有讓用戶更加關注網站中的核心內容,才能夠顯示出交互設計的意義。
三、保證加載速度不會太慢
當然,人機交互設計的再好,也難以避免的一個缺陷就是會使網站的加載速度變慢。因為基于B/S技術的網站,是必須要通過預加載到客戶端計算機才可以運行。所以網站上的每一個元素都要通過客戶端瀏覽器的解釋之后才能夠顯示。
所以我們可以得出,越復雜的交互設計,無疑就會給網站的加載速度帶來越多的負擔,如果人機交互效果設計的過于復雜,在這些內容呈獻給用戶之前,首先讓用戶感到的是網站加載時的遲緩,這是網站的一個非常嚴重的減分項。所以,在設計人機交互時,應該盡量合并JavaScript代碼和CSS樣式代碼等以避免資源的堵塞。而在圖片方面,也要在保證清晰度的情況下盡量的縮減大小,這樣才能夠盡可能的讓網站的加載速度不會受到太大的影響。
人機交互出現的目的就是為了讓用戶體驗更進一步,所以在進行交互的設計時,也一定要以用戶體驗出發,只有這樣,才能讓交互效果真正的給網站帶來正面的能量。
? ? ? ? | 公司名稱:上海緣震網絡科技有限公司 開戶銀行:中國工商銀行上海市彭浦支行 銀行賬號:1001 2508 0930 0206 455 |
總部:上海市奉賢區金海公路6055號29號3樓 分部:上海市靜安區共和新路4718弄10號樓2樓 商務官網:www.xczy11.com 彥蓁科技:www.shyanzhen.cn | 緣震網絡成立于 2014 年,公司主要經營全案策劃,高端品質網站建設、多媒體視頻宣傳片制作、微信公眾號開發、微信小程序開發、商城定制、SEO優化、電商托管、空間托管、網站維護、應用軟件開發、手機端APP開發、等為客戶提供一條龍網絡運營解決方案的的技術型企業。我們在人力資源、業務范圍、設計、技術、服務、信譽度、規范管理及企業文化等諸多方面完善自己,公司目前已與千余家各類客戶進行長期戰略合作,提供專業的網站建設與運營服務。我們的口號:廣結良緣、震古爍今! |