網站建設

PC + 手機 + 微信網站 + 小程序 + APP,五端合一(yī / yì /yí)

當前位置:首頁>新聞資訊>網站建設

手機網站建設智能手機網站界面

時(shí)間:2011-08-16   訪問量:1236

如今智能手機發展迅速已深深地(dì / de)影響着人(rén)們的(de)生活, 而(ér)且觸屏手機給人(rén)更新奇的(de)體驗。智能手機給人(rén)們帶來(lái)方便的(de)同時(shí)也(yě)存在(zài)着一(yī / yì /yí)些不(bù)足, 手機具有本身的(de)局限性, 如屏幕小, 輸入的(de)效率限制, 網絡傳輸速度慢等。在(zài)很小的(de)範圍中提煉有意義的(de)信息, 提高獲取信息的(de)效率是(shì)手機平台設計的(de)目标。

1 用戶體驗與智能手機的(de)關系

許多國(guó)内外的(de)研究學者大(dà)多是(shì)從心理層面闡述體驗的(de)含義, 體驗經濟學家派恩認爲(wéi / wèi)體驗就(jiù)是(shì)指人(rén)們以(yǐ)自己的(de)方式在(zài)一(yī / yì /yí)段時(shí)間中獲得的(de)一(yī / yì /yí)系列可回憶的(de)事件。唐納德·諾曼在(zài)《情感化設計》中的(de)觀點, 體驗分爲(wéi / wèi)感官的(de)、行爲(wéi / wèi)的(de)和(hé / huò)反思的(de)3個(gè)層次, 用戶對一(yī / yì /yí)個(gè)産品的(de)體驗是(shì)遞進的(de), 首先是(shì)感官, 其次是(shì)行爲(wéi / wèi), 最後是(shì)反思[1]。随着智能手機技術的(de)發展, 人(rén)們對于(yú)網站的(de)要(yào / yāo)求也(yě)在(zài)逐漸提高, 在(zài)感官層次上(shàng)滿足使用者的(de)操作舒适感, 在(zài)操作的(de)過程中富有啓發性, 使用的(de)過程是(shì)令人(rén)愉快的(de), 而(ér)且在(zài)操作後給人(rén)以(yǐ)成就(jiù)感。

智能手機是(shì)能夠進行複雜的(de)信息處理, 支持開放式的(de)嵌入式操作系統以(yǐ)及第三方應用軟件的(de)手機。其最大(dà)的(de)特點就(jiù)是(shì)直接操作, 免去按鍵的(de)間接操作。全觸屏是(shì)智能手機的(de)主要(yào / yāo)發展方向, 其網站界面設計與普通手機上(shàng)的(de)網站界面又有很大(dà)的(de)區别, 直接操作是(shì)智能觸屏手機的(de)特點, 即不(bù)需要(yào / yāo)按鍵的(de)操作, 隻需手指的(de)直接點擊就(jiù)可以(yǐ)打開頁面。直接操作使得網站界面設計需要(yào / yāo)考慮到(dào)人(rén)的(de)手指、使用環境等因素的(de)影響。

2 智能手機網站界面設計影響因素

2.1 用戶因素

智能手機網站界面設計首先應該分析用戶的(de)特征, 充分了(le/liǎo)解目标用戶群體, 包括性别、年齡、文化程度、生活習慣、工作方式、使用動機、個(gè)性特征等。對于(yú)不(bù)同的(de)年齡段的(de)人(rén)使用智能手機會有很大(dà)差異性, 年輕人(rén)對于(yú)新鮮事物的(de)學習能力比較快, 對智能手機的(de)操作會很快熟悉, 手指的(de)操作靈活度也(yě)可以(yǐ)适應小屏幕的(de)點擊要(yào / yāo)求。但是(shì)對于(yú)年紀比較大(dà)的(de)用戶, 智能手機的(de)操作就(jiù)會變得比較複雜, 由于(yú)生理狀況的(de)限制, 其手指靈活度、視力等都會有所降低, 因此在(zài)使用智能手機上(shàng)網的(de)過程中會出(chū)現很多誤操作。

2.2 環境因素

手機的(de)使用環境局限性很小, 可以(yǐ)是(shì)在(zài)辦公場所, 也(yě)可以(yǐ)是(shì)在(zài)公共場所, 幾乎包括所有環境。但是(shì)在(zài)嘈雜環境中容易受到(dào)影響, 用戶在(zài)一(yī / yì /yí)個(gè)環境中進入另一(yī / yì /yí)個(gè)環境, 需要(yào / yāo)對新環境的(de)關注使得對手機的(de)内容會有忽略, 導緻對手機任務的(de)中斷。由于(yú)這(zhè)些因素, 網站界面設計需要(yào / yāo)考慮用戶所處的(de)環境, 平衡網站的(de)功能與用戶的(de)需求。在(zài)不(bù)同的(de)環境中使用智能手機還需要(yào / yāo)考慮到(dào)隐私, 例如在(zài)擁擠的(de)地(dì / de)鐵中使用手機就(jiù)會擔心自己的(de)隐私會被别人(rén)看到(dào)。并且在(zài)這(zhè)樣的(de)環境中往往是(shì)單手操作, 單手操作時(shí)用拇指點擊, 點擊的(de)精度就(jiù)會随之(zhī)降低。

2.3 技術因素

大(dà)屏幕、多點觸摸以(yǐ)及操作的(de)流暢性成爲(wéi / wèi)智能手機的(de)設計發展趨勢, 手機屏幕的(de)材質、尺寸、性能以(yǐ)及操作系統平台的(de)性能影響着智能手機的(de)體驗。智能手機的(de)屏幕雖然有逐漸變大(dà)的(de)趨勢, 但是(shì)相對于(yú)電腦屏幕來(lái)說(shuō)還是(shì)相差很大(dà)。

3G寬帶上(shàng)網技術是(shì)智能手機的(de)重要(yào / yāo)特征, 相對于(yú)目前的(de)WAP, GPRS和(hé / huò)CDMAx1, 它的(de)特點是(shì)速度快、資費低和(hé / huò)掉線率低。随着移動網絡技術如基于(yú)XML的(de)網絡浏覽技術的(de)成熟, 傳統互聯網和(hé / huò)移動互聯網會進一(yī / yì /yí)步融合, 将會有更多用戶用手機上(shàng)網。快速的(de)上(shàng)網速度提高了(le/liǎo)網頁的(de)訪問效率, 從而(ér)給用戶更佳的(de)上(shàng)網體驗。内置感應器的(de)使用使得娛樂更加具有樂趣, 重力加速度感應器改變了(le/liǎo)以(yǐ)往的(de)操作方式, 使得遊戲更加刺激有趣, 給人(rén)以(yǐ)新的(de)體驗。

2.4 網站類型因素

不(bù)同類型的(de)網站其内容安排會出(chū)現很大(dà)差異, 按照網站的(de)功能來(lái)劃分, 可把網站歸結爲(wéi / wèi)4類:展示型、内容型、電子(zǐ)商務型、門戶型。由于(yú)網站功能的(de)不(bù)同, 其色彩運用以(yǐ)及頁面布局會随之(zhī)變化。門戶網站由于(yú)内容較多, 各項分類導航是(shì)非常重要(yào / yāo)的(de), 用戶在(zài)進入網站後需要(yào / yāo)根據頁面導航在(zài)不(bù)同層級中往返。社交網站則注重好友發布的(de)信息, 在(zài)首頁還需要(yào / yāo)提供關于(yú)個(gè)人(rén)信息的(de)提示, 例如好友回複、新鮮事發布等, 購物網站需要(yào / yāo)很方便的(de)找到(dào)生活用品的(de)分類, 在(zài)用戶進入其他(tā)頁面後需要(yào / yāo)提供回到(dào)主頁的(de)快捷入口等。

3 智能手機網站界面設計的(de)目标

3.1 信息傳遞的(de)效率

由于(yú)小屏幕的(de)限制, 對于(yú)信息的(de)傳達有着更高的(de)要(yào / yāo)求, 如果用戶沒有在(zài)預期的(de)時(shí)間内找到(dào)自己想要(yào / yāo)的(de)信息就(jiù)會産生挫折感。用戶在(zài)篩選信息的(de)過程中會放棄繁雜的(de)操作程序, 避免産生情緒上(shàng)的(de)煩躁。界面設計不(bù)合理會造成用戶篩選信息困難, 造成資源的(de)浪費。針對小屏幕的(de)特點, 最快捷、簡潔、優化是(shì)智能手機網站界面設計的(de)指導原則。友好的(de)界面設計應該讓用戶感到(dào)易用、好用。易用的(de)手機網站須遵循“少即是(shì)多”的(de)設計原則, 簡便的(de)交互設計, 清晰準确的(de)提示或反饋, 從簡潔中體現優雅, 充分地(dì / de)滿足用戶的(de)需求。

良好的(de)網站結構會對用戶的(de)需求有預見性, 易于(yú)理解并有“預見性”的(de)導航, 在(zài)手機網站中起着重要(yào / yāo)的(de)作用, 讓用戶知道(dào)自己所處的(de)位置。使用合理的(de)排版, 順暢地(dì / de)将信息傳達給用戶, 連貫的(de)不(bù)間斷的(de)視線移動閱讀會提高傳達信息的(de)效率, 反之(zhī), 雜亂的(de)信息會讓用戶不(bù)知所措, 無法更好地(dì / de)接收信息。

3.2 交互過程中的(de)可用性

1) 經驗與信息的(de)提示。人(rén)對事物的(de)認知首先應該具有一(yī / yì /yí)定的(de)經驗, 其次需要(yào / yāo)提供足夠的(de)信息提示, 著名網頁Web應用程序和(hé / huò)應用軟件圖片交互心理學的(de)設計專家斯蒂芬·P·安德森曾說(shuō)過:“良好的(de)交互設計關注人(rén)們所想, 所做以(yǐ)及所感”。人(rén)們在(zài)操作的(de)過程中基本是(shì)靠外界的(de)提示以(yǐ)及自己大(dà)腦中已經掌握的(de)信息, 如果新的(de)操作方式比較複雜或者用戶沒有學習過, 這(zhè)樣就(jiù)不(bù)會産生流暢的(de)操作體驗。

2) 信息量與可操作性之(zhī)間的(de)平衡。智能觸屏手機幾乎全部是(shì)用手指觸摸進行操作, 雖然屏幕比非觸屏手機大(dà), 但是(shì)手指的(de)精度也(yě)降低很多, 因此在(zài)一(yī / yì /yí)個(gè)頁面中既要(yào / yāo)顯示充足的(de)内容, 又要(yào / yāo)防止用戶的(de)誤操作, 保持良好的(de)浏覽體驗。用同一(yī / yì /yí)浏覽器查看三大(dà)門戶網站, 界面會有比較大(dà)的(de)區别。由于(yú)信息量大(dà), 其鏈接的(de)大(dà)小應符合人(rén)機尺寸, 用戶點擊不(bù)會産生誤操作, 也(yě)能獲得足夠的(de)信息。

3) 操作的(de)過程中的(de)信息反饋。在(zài)用戶進行操作後需要(yào / yāo)知道(dào)自己的(de)操作是(shì)否達到(dào)了(le/liǎo)自己的(de)目的(de), 提示用戶操作成功與否。智能觸屏手機的(de)反饋具有多樣化, 視覺反饋、聽覺反饋以(yǐ)及觸覺反饋都需要(yào / yāo)符合用戶的(de)心智模型。不(bù)同的(de)反饋還需要(yào / yāo)考慮到(dào)環境的(de)影響, 在(zài)嘈雜的(de)環境中視覺反饋和(hé / huò)觸覺反饋會更适合。在(zài)打開某個(gè)網頁時(shí), 需要(yào / yāo)用戶等待, 在(zài)等待的(de)過程中需要(yào / yāo)提示用戶網站正在(zài)逐步打開, 需要(yào / yāo)遵守網站反饋的(de)限時(shí)原則, 即用戶沒有必要(yào / yāo)對某些網站響應等待時(shí)間過長。由于(yú)觸屏手機需要(yào / yāo)手指的(de)點擊, 因此點擊區域應做合适的(de)設計, 對誤點擊應讓用戶很方便的(de)回到(dào)上(shàng)頁。允許用戶出(chū)現錯誤, 并且在(zài)錯誤發生後給用戶提示, 引導用戶做出(chū)糾正。

4 智能觸屏手機網站界面設計原則

4.1 信息傳達有效性

傳達信息的(de)媒介主要(yào / yāo)有文字、圖片、視頻等組成, 單個(gè)文字讓用戶不(bù)會明白含義, 必須放置于(yú)一(yī / yì /yí)定的(de)語義環境中才能構成完整的(de)意義。語句的(de)使用需要(yào / yāo)和(hé / huò)主流文化相一(yī / yì /yí)緻才能讓人(rén)理解, 将語句放置于(yú)一(yī / yì /yí)定的(de)環境中構成一(yī / yì /yí)定語境下的(de)意義, 準确地(dì / de)傳達所要(yào / yāo)表達的(de)含義。

平衡可選擇性和(hé / huò)信息量之(zhī)間的(de)關系, 過少的(de)内容不(bù)能滿足用戶的(de)信息, 過多的(de)内容造成選擇的(de)幹擾, 手機網站内容的(de)設計不(bù)宜做的(de)廣而(ér)泛, 而(ér)是(shì)精而(ér)淺。優秀的(de)網站體驗應該是(shì)使用戶感到(dào)自己在(zài)掌控信息, 而(ér)不(bù)是(shì)網站在(zài)引導自己漫無目的(de)的(de)浏覽, 迷失在(zài)海量的(de)信息中。手機網站的(de)簡潔性來(lái)自于(yú)網站傳達的(de)信息、用戶浏覽的(de)方式和(hé / huò)目的(de)以(yǐ)及使用方法。網站都有自己的(de)核心内容和(hé / huò)功能, 關注用戶最直接在(zài)日常生活中使用的(de)功能可以(yǐ)提升網站的(de)體驗。由于(yú)手機硬件和(hé / huò)網絡環境的(de)限制, 需要(yào / yāo)精簡網站的(de)視覺效果, 删除不(bù)必要(yào / yāo)的(de)信息幹擾, 例如廣告無用的(de) (點擊率低) 的(de)鏈接, 這(zhè)樣使界面更加簡潔易用。

4.2 網站層次結構設計符合用戶習慣

網站的(de)層次結構在(zài)視覺層面上(shàng)需要(yào / yāo)将元素有組織地(dì / de)進行分組, 将不(bù)同的(de)數據信息進行區别, 去除多餘的(de)視覺元素, 這(zhè)樣可以(yǐ)讓用戶更加清晰地(dì / de)看到(dào)相關内容。在(zài)網站空間層次上(shàng)需要(yào / yāo)将相似功能組織在(zài)一(yī / yì /yí)起, 通過第一(yī / yì /yí)層次上(shàng)的(de)導航進入相關的(de)功能區, 讓用戶清楚地(dì / de)知道(dào)任務與子(zǐ)任務之(zhī)間的(de)關系, 使用者無需進行過多思考就(jiù)可以(yǐ)進入下一(yī / yì /yí)步的(de)任務, 良好的(de)結構層次會提高網站的(de)可用性。

由于(yú)手機較小的(de)屏幕, 網站結構往往采用單一(yī / yì /yí)樹形結構的(de)組織方式, 這(zhè)樣導緻用戶很難在(zài)其他(tā)的(de)選擇中自由轉換, 因此, 在(zài)網站的(de)結構設計中需要(yào / yāo)對用戶的(de)操作需求有适當的(de)預見, 合理的(de)分級歸類将會幫助用戶很輕松地(dì / de)達到(dào)目的(de)。注重網站的(de)可用性, 确定用戶訪問所要(yào / yāo)達到(dào)的(de)目的(de), 排列網站内容的(de)優先次序。

4.3 交互方式合理性

在(zài)電腦上(shàng)浏覽網站時(shí)鼠标可以(yǐ)精确到(dào)1像素, 而(ér)觸摸屏點擊區域爲(wéi / wèi)29像素, 而(ér)且有時(shí)用戶在(zài)點擊觸摸屏目标區域時(shí)并沒有真正點中, 存在(zài)一(yī / yì /yí)定偏差。如果過多的(de)信息沒有合适的(de)間距, 頻繁的(de)誤點擊就(jiù)會影響用戶的(de)操作流暢度。在(zài)操作的(de)過程中需要(yào / yāo)有良好的(de)反饋信息, 盡量采用非模态反饋, 以(yǐ)使操作更加流暢。

在(zài)觸屏時(shí)代, 智能手機具有豐富的(de)交互方式, 令人(rén)愉悅的(de)聲音及動畫, 新奇的(de)手勢操作都提高了(le/liǎo)用戶的(de)使用體驗。在(zài)交互方式的(de)設計中應首先滿足用戶的(de)基本需求, 并且易學、易用, 其次在(zài)操作的(de)過程中産生良好的(de)情感體驗。多種手勢的(de)使用也(yě)增加了(le/liǎo)用戶學習的(de)成本, 手勢的(de)使用需要(yào / yāo)和(hé / huò)用戶的(de)心智模型保持一(yī / yì /yí)緻, 如果新的(de)手勢不(bù)爲(wéi / wèi)用戶所知, 那麽這(zhè)個(gè)操作就(jiù)不(bù)會順利進行。

4.4 具有良好的(de)品牌體驗

對于(yú)一(yī / yì /yí)個(gè)好的(de)網站, 網站的(de)内容需要(yào / yāo)具有較高的(de)品質, 還需要(yào / yāo)給人(rén)們以(yǐ)良好的(de)使用體驗, 當浏覽一(yī / yì /yí)個(gè)網站時(shí)必定會帶有一(yī / yì /yí)定的(de)期望, 當滿足了(le/liǎo)這(zhè)些期望, 良好的(de)用戶滿意度随之(zhī)産生, 這(zhè)也(yě)會影響到(dào)品牌信譽, 增加用戶的(de)忠誠度。

上(shàng)一(yī / yì /yí)篇:企業做網站當前CSS技術所存在(zài)的(de)不(bù)足之(zhī)處

下一(yī / yì /yí)篇:CSS3新網頁技術的(de)時(shí)代

發表評論:

評論記錄:

未查詢到(dào)任何數據!

在(zài)線咨詢

點擊這(zhè)裏給我發消息 售前咨詢專員

點擊這(zhè)裏給我發消息 售後服務專員

在(zài)線咨詢

免費通話

24小時(shí)免費咨詢

請輸入您的(de)聯系電話,座機請加區号

免費通話

微信掃一(yī / yì /yí)掃

微信聯系
返回頂部