新聞中心
本文推崇的是“因為現(xiàn)代人越來越生活net依存狀態(tài),ipad,3g等等,各種情況下人時時刻刻都在online狀態(tài)中。所以如何讓任何用戶在任何情境下使用任何進入網(wǎng)絡(luò)的工具(此處指移動設(shè)備,cellphone或是平板電腦等)進入任何網(wǎng)絡(luò)(比如火車上信號弱的情況v.s.家中wifi通暢的情況),都能有一致的用戶體驗?!?/p>

云浮網(wǎng)站制作公司哪家好,找創(chuàng)新互聯(lián)建站!從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計等網(wǎng)站項目制作,到程序開發(fā),運營維護。創(chuàng)新互聯(lián)建站成立與2013年到現(xiàn)在10年的時間,我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗,來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。
Why?
先看看任何情景+任何入網(wǎng)工具
(情景一:同時打開兩個窗口)用戶正在看豪斯醫(yī)生,但是此刻正好Hugh Laurie沒有在鏡頭中,所以用戶決定趁此時看一下他的mail,他的一個朋友發(fā)給他了一個連接,他在側(cè)欄打開這個鏈接,但打開這種連接,也不影響他是不是“監(jiān)視”這豪斯醫(yī)生的屏幕。The user is watching House on their new Internet TV. Hugh Laurie’s not on screen, so the user decides to check their email. A friend has sent a link to your website, which the user opens in a sidebar and views simultaneously with the program.
(情景二:雖然有良好的展示區(qū)域,但是網(wǎng)速比較差)用戶在下班回家的遠途火車上,使用ipad上3g在上網(wǎng)。The user is on a train back from work, probably delayed somewhere, accessing your website via 3G on an iPad
(情景三:展示區(qū)域非常小)用戶正在嘗試使用他的索尼愛立信手機上的mini Opera瀏覽器看你的客戶網(wǎng)站。The user is on a client’s website. They need to access your website to read an article, but they have only a company-supplied Sony Ericsson with Opera Mini installed. How?
How?那么,怎么設(shè)計一個能讓用戶在這三種情景下,都是流暢而又一致的體驗?
首先是存儲在大腦中的設(shè)計Key rules:
1. 網(wǎng)站的寬度必須是用戶能多寬,設(shè)計就得有多寬;The website should be available to as wide an audience as possible;
2. 網(wǎng)站的內(nèi)容必須是無論什么時候看無論拿什么看都是一樣的;The website should contain the same content wherever it is viewed, where feasible;
3. 網(wǎng)站的結(jié)構(gòu)必須是一樣的;The website’s structure should be the same wherever it is viewed;
4. 無論用戶使用什么產(chǎn)品,內(nèi)容的展示必須符合該產(chǎn)品。The content should be displayed in a manner that is appropriate to its environment.
其次是Step by steps詳解(強烈建議看原文,詳解各種technic,tips,科普知識及如何做,完全無能于是無責(zé)任硬翻||||||):
一. 為移動設(shè)備做設(shè)計:
1.使用HTML5,各種移動設(shè)備的瀏覽器均支持HTML5;
2.屏幕既要適合大到40英寸的1920×11080像素的屏幕也要適合小到320×240像素的小屏幕,可以使用CSS的@media;
3.如果使用跨平臺開發(fā),忘記silverlight和flash吧,因為他們不適合跨平臺。
4.謹慎使用JavaScript:很不幸的我們必須考慮未知的屏幕尺寸的設(shè)計,所以這個時候我們需要更加注意“網(wǎng)站內(nèi)容結(jié)構(gòu)”而少專注于美觀的UI設(shè)計。
5.測試,測試,再測試!!!請在不同的移動設(shè)備上,在任何開發(fā)時期,隨時隨地測試!
6.不重視UI設(shè)計就是丑小鴨?不是。一個好的設(shè)計不僅僅是“美觀”,重要的是信息架構(gòu),布局導(dǎo)航,層次結(jié)構(gòu)的合理。
二. 移動設(shè)備網(wǎng)頁的內(nèi)容:
1.明白什么是用戶最主要的任務(wù),當(dāng)用在一個極小的屏幕上進入首頁時,***化的情況是能將首頁一屏展示。另外,圖標(biāo),導(dǎo)航等需要“簡單易懂”的展示出來。
youtube網(wǎng)頁HP
youtube iphone HP
2.信息架構(gòu)和信息層級必須穩(wěn)固且合理。用戶容易一著陸你的網(wǎng)站就知道這是做什么的,且很容易的找到他想要的東西。
John Lewis’ iphone導(dǎo)航
3.保證你呈現(xiàn)的內(nèi)容都是對用戶有用的。移除不必要的文案,不必要的圖片,不支持的文件格式(Ex,flash)。
三.將各種服務(wù)中將你的服務(wù)推出來,讓用戶對你的服務(wù)產(chǎn)生粘性。
對以下幾條多留心,就容易讓你的網(wǎng)站被“發(fā)現(xiàn)”且“易傳播”。
1.使你的文章標(biāo)題格式簡潔且易被搜索引擎搜索出來并且排位靠前(這個完全沒有研究過,除了付費搜索引擎外的方式,如何讓自己的標(biāo)題更符合“搜索”格式)。
2.(這個是個Tips)讓你的信息能很好的“外流分享”出去,提供多種“分享”按鈕,讓用戶免費為你做推廣。
四.那么APP前進方向呢?
你開發(fā)的app容易被購買,安裝,卸載;
做一件事,就做到最精。鎖定你的品牌和服務(wù),讓用戶聯(lián)想到某一項特殊服務(wù)的時候,就立刻想到使用你的app(比如“我要搜索,我就要google的APP”);
app不要做信息孤島,當(dāng)用戶使用app又突然有其他任務(wù)需要打開某一鏈接時,扔允許用戶能在你的app當(dāng)中打開;
如果你開發(fā)app,***掛到大品牌下面的頁面下面來提高你app的曝光率和可信度;
手機用戶更偏向瀏覽器app。
Resources
HTML5 開發(fā)環(huán)境:
CS5 HTML5 Support Pack (part of the CS5 11.0.3 Updater), plus tutorial
Aptana 3 beta
模擬器:
Android
Opera Mini
Apple iPhone (via iOS SDK)
Windows Mobile (look for the latest Windows Phone Developer Tools)
BlackBerry
Nokia Mobile Browser
當(dāng)前名稱:為未來的網(wǎng)頁做設(shè)計
本文鏈接:http://www.5511xx.com/article/dhcscsp.html


咨詢
建站咨詢
