你是不是還在用PC的思路做移動(dòng)端的設(shè)計(jì)？不管承不承認(rèn)我還是相信有一些設(shè)計(jì)師還是會(huì)這樣做的。那么什么是PC的思路？移動(dòng)端的設(shè)計(jì)又該怎么表現(xiàn)？

PC的思路
首先我們大致的過一下PC的思路。這對(duì)于大多數(shù)網(wǎng)頁設(shè)計(jì)師來說是一個(gè)很容易回答的問題，亦或者思路會(huì)比較清晰。首先是導(dǎo)航，接下來是banner，緊接著是內(nèi)容部分，最后是footer。這好像是一個(gè)完美的結(jié)構(gòu)邏輯，至少多數(shù)的客戶都能夠接受這樣的布局。接著我們?cè)賮碚f一下PC的設(shè)計(jì)元素都會(huì)用到哪些。在PC的元素中我們最常見的應(yīng)該是箭頭吧，各種大小形狀的箭頭分布在不同的位置，起著同一個(gè)作用。還有什么？各種聯(lián)系、關(guān)注（QQ，微信，微博之類）、返回頂部的按鈕吧，還有更多和返回之類的按鈕。另外下拉菜單好像也是PC的標(biāo)配。最后我們提一下PC的主流瀏覽方式，好像只有鼠標(biāo)點(diǎn)點(diǎn)點(diǎn)，應(yīng)該沒有其他方式了吧。
移動(dòng)端思路
說了這么多PC端的特點(diǎn)，其實(shí)對(duì)我們今天的主題只是鋪墊。我們先來反思一下在操作移動(dòng)端項(xiàng)目的時(shí)候是否會(huì)經(jīng)常把以上的某些經(jīng)驗(yàn)帶到項(xiàng)目中，而這些思路，元素真的是符合移動(dòng)端項(xiàng)目嗎，符合用戶思維嗎，或者根本就是雞肋？究其原因，我認(rèn)為很大的問題是智能移動(dòng)設(shè)備的搭載功能和交互方式與PC有著天壤之別。就需要設(shè)計(jì)師在設(shè)計(jì)的過程中，更多的去考慮這些因素，呈現(xiàn)出來的功能引導(dǎo)要往這些方面靠攏。
以智能手機(jī)為例：手機(jī)搭載了傳感器：包括攝像頭、陀螺儀、麥克風(fēng)等設(shè)備；手機(jī)的主要交互方式是：手勢(shì)、滑動(dòng)、長按、點(diǎn)擊、搖晃等。所以如果用PC的思路來做移動(dòng)的設(shè)計(jì)時(shí)總會(huì)給人一種非常“別扭”的感覺。用戶的很多習(xí)慣被這種思路延伸出來的設(shè)計(jì)弄得很懵。舉個(gè)簡(jiǎn)單的例子：PC端的banner經(jīng)常是長方形的矩形，當(dāng)成比例搬到手機(jī)上是否會(huì)一種很擁擠的感覺？如果這個(gè)可以接受的話那在banner這個(gè)部分還可以舉出更直接的例子。PC的banner一般都會(huì)用箭頭的元素進(jìn)行切換，但是當(dāng)把箭頭搬到移動(dòng)端上的時(shí)候是否會(huì)很雞肋？設(shè)想一下，你會(huì)在手機(jī)上去觸碰箭頭進(jìn)行切換嗎？大多數(shù)情況下手機(jī)用戶都是用手勢(shì)滑動(dòng)的交互方式進(jìn)行切換。如果說你想要引導(dǎo)用戶這里有多張圖片，完全可以設(shè)計(jì)一些精致簡(jiǎn)單的幾何圖形排列在圖片的下方，用戶自然不會(huì)去點(diǎn)擊指頭根本觸碰不到的小圖形也會(huì)意識(shí)到這里有多張圖片切換。這就是簡(jiǎn)單的用PC思路做移動(dòng)端的真實(shí)事例。
所以我們?cè)撚檬裁礃拥乃悸啡プ鲆苿?dòng)端呢？
簡(jiǎn)-減-檢。對(duì)，我用3個(gè)jian來概述設(shè)計(jì)移動(dòng)端的思路。
簡(jiǎn)---你的頁面盡量的簡(jiǎn)單，盡量不出現(xiàn)PC端左右內(nèi)容的排版，大多采用上下的排版（前方高能，記住，純色塊和留白還有圖片是這種排版方式的調(diào)和劑，能很好的幫助設(shè)計(jì)師來調(diào)整頁面的節(jié)奏）
減---為了沉浸式的體驗(yàn)，設(shè)計(jì)師必須摒棄PC的習(xí)慣，將移動(dòng)端的內(nèi)容設(shè)計(jì)表現(xiàn)的更加順暢，減少各種關(guān)卡環(huán)節(jié)。我總結(jié)了一下，移動(dòng)端的交互，點(diǎn)擊是目的，滑動(dòng)是習(xí)慣。所以，至關(guān)重要的內(nèi)容我們就用點(diǎn)擊的方式讓用戶操作，當(dāng)然點(diǎn)擊開的內(nèi)容一定是重要的，比如是成交動(dòng)作，而其他的內(nèi)容就用滑動(dòng)來實(shí)現(xiàn)吧。不管是左滑右滑還是上滑下滑（說到這里，插一點(diǎn)。有的設(shè)計(jì)師說又不讓跳轉(zhuǎn)又不讓出下拉，移動(dòng)端的屏幕本來就小，怎么設(shè)計(jì)。其實(shí)我認(rèn)為有限的屏幕寬度背后我們可以通過滑動(dòng)來實(shí)現(xiàn)無限的展示空間。比如像地圖，我是不是很機(jī)智，你們腦補(bǔ)一下。）順便舉個(gè)例子吧：有一種洗衣機(jī)是那種左邊洗衣，右邊脫水的雙桶洗衣機(jī)。它解決了之前更老的不能脫水的洗衣機(jī)能讓衣服快速晾干的過程。當(dāng)全自動(dòng)洗衣機(jī)出現(xiàn)的時(shí)候人們是不是更青睞于全自動(dòng)呢，設(shè)定程序連洗帶甩甚至烘干一步操作完成。再舉個(gè)例子吧，簡(jiǎn)直停不下來。我們?cè)谑褂弥Ц秾氈Ц兜臅r(shí)候是不是發(fā)現(xiàn)根本沒有確定按鈕，輸入金額指紋支付，錯(cuò)誤給個(gè)返回，成功給個(gè)提示。僅僅只是少了一步，感覺好爽。
檢---當(dāng)然是檢測(cè)啦。自己做好的設(shè)計(jì)在手機(jī)上多滑動(dòng)滑動(dòng)，自己試用一下看看是否順暢，邏輯是否通順，這很容易做到的。不斷的非否定自己，不斷的改正設(shè)計(jì)。你離一個(gè)優(yōu)秀的設(shè)計(jì)師已經(jīng)不遠(yuǎn)了。（推薦大家一款在移動(dòng)端及時(shí)預(yù)覽PS中設(shè)計(jì)稿的神奇——Ps Play）
當(dāng)然還有更多其他的一些應(yīng)該注意的點(diǎn)這里就不一一贅述，我相信，聰明的設(shè)計(jì)師根據(jù)這篇文章一定可以舉一反三。

手機(jī)網(wǎng)站制作，手機(jī)網(wǎng)站開發(fā)，手機(jī)網(wǎng)站開發(fā)，觸屏版手機(jī)網(wǎng)站制作，豐富的手機(jī)網(wǎng)站開發(fā)經(jīng)驗(yàn)，優(yōu)先的技術(shù)優(yōu)勢(shì)，觸屏版手機(jī)網(wǎng)站開發(fā)專家!歡迎咨詢!010-63307995！