Lisa是一個(gè)sales，一天上午她拿出手機(jī)準(zhǔn)備定位當(dāng)前與客戶的位置，確定路線。卻發(fā)現(xiàn)因?yàn)檫^(guò)于強(qiáng)烈的光線，看不清列表結(jié)果頁(yè)的地址。

Bill有睡前用手機(jī)查看訂閱、處理郵件的習(xí)慣。卻總會(huì)因?yàn)槠聊淮萄鄣墓饩€，需要時(shí)間逐漸從光暈中適應(yīng)辨清字體。

類似的場(chǎng)景在日常生活中你或許也有碰到。

部分硬件設(shè)備也為其提供了相應(yīng)的解決方案——屏幕亮度調(diào)節(jié)，可以手動(dòng)控制屏幕的亮度，適應(yīng)不同的環(huán)境，以及在更高端的設(shè)備上支持的光線感應(yīng)器。

同時(shí)我們也看到應(yīng)用商所做的努力。更有貼心的是閱讀應(yīng)用的夜晚閱讀模式，這為字體與背景提供了弱對(duì)比度的配色設(shè)計(jì)。

但我們?cè)诟嗟膽?yīng)用軟件中發(fā)現(xiàn)，對(duì)光線環(huán)境的設(shè)計(jì)需求被忽略。我相信也會(huì)有更多的方式與設(shè)計(jì)，為用戶帶來(lái)良好的針對(duì)環(huán)境的優(yōu)化體驗(yàn)。忘記浮躁的成本效益，專注產(chǎn)品UI設(shè)計(jì)。

設(shè)計(jì)原則

• 布局結(jié)構(gòu)清晰

清晰的布局結(jié)構(gòu)是對(duì)一個(gè)應(yīng)用是否可用的基本要求，功能布局層次鮮明，使得新用戶通過(guò)低成本的學(xué)習(xí)快速記憶掌握應(yīng)用的功能布局，能夠在短時(shí)間內(nèi)完成既定的任務(wù)。

• 內(nèi)容清晰

保持圖標(biāo)的簡(jiǎn)約以及文字的可讀尺寸，切忌因?yàn)檫^(guò)于追求特效與視覺(jué)美感，忽略最基本的可讀性。

• 適合的灰度與色彩對(duì)比度

為不同的環(huán)境模式提供相應(yīng)的對(duì)比度設(shè)計(jì)，以減少用戶的閱讀疲勞，其中仍需保持內(nèi)容的可讀性。

• 聲音事件的反饋

設(shè)計(jì)不應(yīng)局限于視覺(jué)體驗(yàn)，在enable操作后觸發(fā)的聲音，會(huì)讓用戶確信每一步操作的正確，以及填充某些環(huán)境下視覺(jué)設(shè)計(jì)的死角。

• 適合的環(huán)境元素參與

更多具有感情色彩的元素參與，將賦予界面更多的靈性。將weather的元素加入reader不是一件很溫馨的事情么？

視覺(jué)設(shè)計(jì)范例

Google Map

清晰的功能引導(dǎo)設(shè)計(jì)，綠色、紅色的Pin可以直觀的確認(rèn)目的地與當(dāng)前位置，導(dǎo)航列表簡(jiǎn)潔，可以更可靠的工作在日光之下。

QQ瀏覽器

提供了白天模式/夜間模式的切換，在夜間周圍光線較弱時(shí)，一定程度上緩解了視覺(jué)疲勞。

商鋪點(diǎn)評(píng)

為室內(nèi)/室外環(huán)境分別做了配色以及字體設(shè)計(jì)。在室外的實(shí)際應(yīng)用過(guò)程中，更大的字體與對(duì)比反差帶來(lái)了良好的閱讀體驗(yàn)。并概念性的加入了天氣組件，為出游逛街提供了更多便利。

特例

當(dāng)然，并不是所有的應(yīng)用都需要針對(duì)性的UI設(shè)計(jì)，該類設(shè)計(jì)較適用于內(nèi)容主導(dǎo)的生活相關(guān)應(yīng)用。在游戲中設(shè)計(jì)多套色彩模型并不是一個(gè)好主意。

來(lái)源：http://www.mdong.org/?p=1633