java rwd

We already know that majority of solutions should start with a design for smartphones, we know that all websites should be responsive. Now, it’s time to think about holistic solutions with specific tasks adapted to all kind of devices.

我們已經(jīng)知道大多數(shù)解決方案都應該從智能手機的設計開始，我們知道所有網(wǎng)站都應該具有響應能力。 現(xiàn)在，是時候考慮針對特定任務適應各種設備的整體解決方案了。

許多設計師傾向于制作“數(shù)字口袋刀”。 (Lots of Designers tend to make “Digital Pocket Knives.”)

We like to make solutions universal, but every device category is different. Making design universal does not mean that it will work well in all cases.

我們希望使解決方案通用，但是每個設備類別都不相同。 使設計通用化并不意味著它在所有情況下都能正常工作。

We can compare this situation to stuff like pocket knives. They pack many multiple tools inside a small object. However, do you use your pocket knife all the time? What tool do you use when you have to slice bread or cut paper? Is it a pocket knife? The majority of us will answer no.

我們可以將這種情況與小刀之類的東西進行比較。 他們在一個小物體中包裝了許多工具。 但是，您是否一直使用小刀？ 當您要切面包或切紙時，您使用什么工具？ 是小刀嗎？ 我們大多數(shù)人會回答“否”。

We love to use tools specialized for specific activity. It is the same when it comes to digital solutions.

我們喜歡使用專門用于特定活動的工具。 在數(shù)字解決方案方面也是如此。

Task-Oriented Design is about creating specialized Interfaces for each category of device. It also helps us to understand if it is worth doing.

面向任務的設計是為每種設備類別創(chuàng)建專門的接口。 它還可以幫助我們了解是否值得這樣做。

什么是面向任務的設計？ (What is the Task-Oriented Design?)

As we know, digital solutions — apps and websites are not used only on personal computers but on a wide variety of devices. What’s more, people use every device category in various situations and for different purposes.

眾所周知，數(shù)字解決方案-應用程序和網(wǎng)站不僅在個人計算機上使用，而且在各種設備上使用。 此外，人們在各種情況下出于不同目的使用每種設備類別。

Some tasks are easier to be done on a smartphone, some on a smartwatch. Some activities are still the most comfortable to accomplish with large screens of traditional computers.

有些任務更容易在智能手機上完成，有些任務更容易在智能手表上完成。 在傳統(tǒng)計算機的大屏幕上完成某些活動仍然是最舒適的。

We have to observe which activities will be appropriate for the specific device. What’s more, we have to figure out how to use unique characteristics of the hardware to make a solution as convenient as possible.

我們必須觀察哪些活動適合特定設備。 此外，我們必須弄清楚如何使用硬件的獨特特性來使解決方案盡可能方??便。

The primary goal of Task-Oriented Design is to make the interaction with the solution seamless — this means that the task that was started on one device may be continued on the other immediately.

面向任務的設計的主要目標是使與解決方案的無縫交互 -這意味著在一個設備上啟動的任務可以立即在另一設備上繼續(xù)。

新的自適應網(wǎng)頁設計？ (New Responsive Web Design?)

Task-Oriented Design is not Responsive Web Design. It is much more. We may assume that RWD is the first step to enter into the subject of Task-Oriented Design. Adjusting the appearance is the must to make the solution usable on specific devices like smartphones.

面向任務的設計不是響應式Web設計。 不僅如此。 我們可以假設RWD是進入面向任務設計主題的第一步。 調(diào)整外觀是使解決方案可在智能手機等特定設備上使用的必要條件。

Responsive Web Design assumes that there are a least three major device categories (desktops, tablets, and smartphones). Designers focus on preparing layouts with all elements in a way that will be readable to every category. Some designers found that specific content may be hidden or replaced with other content on smaller devices.

響應式Web設計假定至少存在三個主要設備類別(臺式機，平板電腦和智能手機)。 設計師專注于以所有類別都可以讀取的方式準備包含所有元素的布局。 一些設計人員發(fā)現(xiàn)，特定的內(nèi)容可能在較小的設備上被隱藏或替換為其他內(nèi)容。

TOD (Task-Oriented Design) goes further. Some processes should be shaped exclusively for each device category. Some of the tasks may not be available for some hardware(like wearables). Others require a completely different approach. Example: for Smart Speakers, we use VUI instead of GUI.

TOD(面向任務的設計)走得更遠。 某些過程應專門針對每種設備類別而定。 有些任務可能不適用于某些硬件 (例如可穿戴設備)。 其他人則需要完全不同的方法。 示例：對于智能揚聲器，我們使用VUI代替GUI。

Building a solution that makes an impression of the consistent product across platforms, but features are crafted for specific abilities of the device type, is the primary goal of Task-Oriented Design.

面向任務的設計的主要目標是構(gòu)建一個解決方案，該解決方案可在各個平臺上給人以一致的印象，但是功能是針對設備類型的特定功能而設計的。

Three target devices for Responsive Web Design響應式Web設計的三個目標設備

那移動優(yōu)先呢？ (What about Mobile First?)

The majority of solutions still should start with a design for a smartphone. Mobile is the perfect platform to start because, like standard computers, this category is used by the majority of people.

大多數(shù)解決方案仍應從智能手機的設計開始。 移動是啟動的理想平臺，因為與標準計算機一樣，該類別被大多數(shù)人使用。

Mobile designs are obviously extended to work faster on tablets. Now, apps with UI from tablets may be launched on Personal Computers (See Apple’s iPad & macOS apps). Having a smartphone app is also a nice exercise to prepare features for the smartwatch that may be directly connected with the Mobile app.

顯然，移動設計已擴展為可在平板電腦上更快地工作。 現(xiàn)在，具有平板電腦UI的應用程序可能會在個人計算機上啟動(請參閱Apple的iPad和macOS應用程序)。 擁有智能手機應用程序也是為可與移動應用程序直接連接的智能手表準備功能的不錯的練習。

There are also cases when it does not matter so much. If you design Voice Assistant, you do not need to focus on Graphical User Interface so much — even for Mobile.

在某些情況下，它并不重要。 如果您設計語音助手，則無需過多地關注圖形用戶界面，即使對于移動設備也是如此。

Smart Devices around us我們身邊的智能設備

面向任務的設計是否反映了現(xiàn)實生活？ (Does Task-Oriented Design reflect real life?)

This is why it has been forged. As I mentioned in the first sentence, we do not use pocket knives all the time — and we do not use only laptops or desktops. Technology has specialized in various forms that may be shaped to deliver a genuinely delightful experience.

這就是為什么它是偽造的。 正如我在第一句話中提到的那樣，我們不會一直使用小刀-而且我們不會僅使用筆記本電腦或臺式機。 技術以各種形式專門化，可以提供真正令人愉悅的體驗。

Look at your typical day…

看你平常的日子...

I am sure that Smartphone or Smartwatch alarm wake you up. Then morning run or exercises monitored by your wearable are also the perfect occasions to listen to some podcasts with Smartwatch connected with wireless Headphones. Next, you read some news from your Tablet during breakfast. When you drive to work, Smartphone connected with Car through CarPlay or Android Auto continue playing your previously listened podcast.

我確定智能手機或Smartwatch鬧鐘會喚醒您。 然后，通過可穿戴設備監(jiān)控的晨跑或鍛煉，也是通過Smartwatch和無線耳機連接收聽某些播客的絕佳場合。 接下來，您在早餐期間從平板電腦上讀取了一些新聞。 當您開車上班時，通過CarPlay或Android Auto與Car連接的Smartphone會繼續(xù)播放以前收聽的播客。

Your job requires you to have a Laptop that is a workstation for the most specialized parts of your work. During the meetings, you make notes with Stylus on your Tablet. Notes made on sticky notes are also photographed with your Smartphone’s camera and sent automatically to your Laptop.

您的工作需要您擁有一臺筆記本電腦 ，該筆記本電腦是您工作中最專業(yè)的部分的工作站。 在會議期間，您可以在Tablet上使用手寫筆做筆記。 便簽上的筆記也會用智能手機的相機拍攝，并自動發(fā)送到筆記本電腦 。

Driving back home is an excellent time to finish the podcast episode. You also make some grocery shopping with the list prepared earlier on your Tablet or Laptop. To mark items as purchased, you use a Smartphone or Wearable device.

開車回家是完成播客節(jié)目的絕佳時機。 您還可以使用先前在平板電腦或筆記本電腦上準備的清單進行雜貨店購物。 要將商品標記為已購買，請使用智能手機或可穿戴設備。

While cooking, Assistant from the Smart speaker guides you to prepare a meal or reminds important things. After dinner, it is time to relax. You launch Smart TV with your Smartphone and play an episode of your favorite movie.

烹飪時， 智能揚聲器的助手會指導您準備餐點或提醒重要的事情。 晚餐后，該放松一下。 您可以使用智能手機啟動智能電視 ，并播放自己喜歡的電影的一集。

At the end of the day, you check your tasks for the next day with a Smartphone and make sure that the alarm was set.

一天結(jié)束時，您可以使用智能手機檢查第二天的任務，并確保已設置警報。

Look at that variety of devices and multiple tasks performed on each of them. Even if you do not use some of the mentioned devices, you see that the majority of the mentioned cases fit perfectly.

查看各種設備以及在每個設備上執(zhí)行的多項任務。 即使您不使用某些提到的設備，您也會看到大多數(shù)提到的情況都非常合適。

Task-Oriented Design is the strategic thinking of how we use technology today. Every category of device is more comfortable with different types of interactions and solutions.

面向任務的設計是當今我們?nèi)绾问褂眉夹g的戰(zhàn)略思考。 每種類型的設備都更適合不同類型的交互和解決方案。

特定設備中使用哪些任務 (What tasks are used in specific devices)

Let’s try to briefly highlight categories where specific device category is most useful.

讓我們嘗試簡要地突出顯示其中特定設備類別最有用的類別。

🖥 Desktop — These classic devices have got the widest purpose. They are used for all kinds of things. However, you will not use it for daily activity monitoring and navigation (GPS).

🖥臺式機 -這些經(jīng)典設備用途最廣。 它們用于各種事物。 但是，您不會將其用于日常活動監(jiān)視和導航(GPS)。

💻 Tablet — The next device category able to helps us with a wide variety of things. Tablets may successfully replace computers in most cases. They are especially useful when you want to browse the internet, communicate, get news, listen to music and podcasts, draw, control smart home, watch movies, play games, read books, take photos, etc. Lots of activities from the ones related to work into entertainment!

💻 平板電腦 —下一個可以幫助我們處理各種事情的設備類別。 在大多數(shù)情況下，平板電腦可以成功取代計算機。 當您想瀏覽互聯(lián)網(wǎng)，交流，獲取新聞，聽音樂和播客，繪畫，控制智能家居，看電影，玩游戲，讀書，拍照等時，它們特別有用。與之相關的許多活動工作娛樂！

📱Smartphone — These are very personal devices and are useful for a very wide variety of things. Their main limits are quite small screen sizes. With a Smartphone, you can do almost the same stuff as in Tablets plus some daily activity monitoring and navigation.

📱 智能手機 —這些是非常個人化的設備，可用于各種各樣的事情。 它們的主要限制是相當小的屏幕尺寸。 使用智能手機，您可以執(zhí)行與平板電腦幾乎相同的工作，并且可以進行一些日?；顒颖O(jiān)視和導航。

?? Smartwatch — Wearables are the most personal device of all, good to track various activities, receive notifications, but poor usability when it comes to creating things or editing existing ones.With Smartwatch, you can easily track daily activity, monitor health, communicate, and receive notifications. You may also navigate and listen to music.

Smart?Smartwatch —可穿戴設備是所有設備中最個人的設備，可以很好地跟蹤各種活動，接收通知，但是在創(chuàng)建事物或編輯現(xiàn)有事物時可用性很差。借助Smartwatch，您可以輕松地跟蹤日?；顒?#xff0c;監(jiān)控健康狀況，進行交流，并接收通知。 您也可以導航和聽音樂。

📺 Smart TV — TVs were always good for entertainment, and even when they became “Smart,” their usage category did not change much. Smart TVs are commonly used to watch movies (obvious!), browse the internet, play games, or control a smart home.

📺智能電視 -電視始終很適合娛樂，即使它們變得“智能”，其使用類別也沒有太大變化。 智能電視通常用于觀看電影(很明顯！)，瀏覽互聯(lián)網(wǎng)，玩游戲或控制智能家居。

🔈 Smart Speaker — This is a quite new and not so popular category of the devices. Their power is in voice assistants. No Graphical User Interfaces limits their capabilities. They are good when you want to listen to music, get news or information, or even control your smart home.

Speaker Smart Speaker ( 智能揚聲器) —這是設備中的一個相當新的但不太流行的類別。 他們的力量在于語音助手。 沒有圖形用戶界面會限制其功能。 當您想聽音樂，獲取新聞或信息，甚至控制您的智能家居時，它們非常有用。

🚗 Car — Driving a car requires a top level of focus. That’s Smart Car System that cannot grab our full attention. In the car, you can comfortably navigate, listen to music or podcasts, and use voice communication.

🚗汽車 -駕駛汽車需要高度關注。 那是無法吸引我們?nèi)孔⒁饬Φ闹悄芷囅到y(tǒng)。 在汽車中，您可以舒適地導航，聽音樂或播客以及使用語音通信。

Multiple tasks, multiple devices, but some areas are the same.多個任務，多個設備，但某些區(qū)域相同。

面向任務的設計有助于說不 (Task-Oriented Design Helps to Say No)

Some solutions should not appear on specific devices. Thinking about a specific device category is also about knowing their limitations.

一些解決方案不應出現(xiàn)在特定設備上。 考慮特定的設備類別也要了解它們的局限性。

Examples: writing notes will never be convenient on a smartwatch, you will not draw with your virtual assistant through the speaker and play a game while driving the car (yes, it should be possible when the car is parked ;) ).

示例：在智能手表上書寫筆記永遠不會方便，您將不會通過虛擬助手在揚聲器上畫畫，也不會在開車時玩游戲(是的，當汽車停放時應該有可能；))。

Apple Calendar-面向任務的設計示例 (Apple Calendar — Sample of Task-Oriented Design)

Lots of existing solutions take advantage of a variety of device types. Companies like Google, Apple, and Microsoft already know that this approach is the best what they can offer to the user. Let’s see the simple example of Apple’s Calendar.

許多現(xiàn)有解決方案都利用了多種設備類型。 像Google，Apple和Microsoft這樣的公司已經(jīng)知道這種方法是他們可以為用戶提供的最好的方法。 讓我們看一下Apple日歷的簡單示例。

The giant from Cupertino is excellent with Task-Oriented Design. Having a wide range of devices and control over hardware and software results in pretty good solutions! Let’s try to focus on Calendar, which is the app used by the majority of users.

庫比蒂諾(Cupertino)的巨頭在面向任務設計方面表現(xiàn)出色。 擁有廣泛的設備以及對硬件和軟件的控制，可以帶來非常好的解決方案！ 讓我們嘗試著眼于日歷，這是大多數(shù)用戶使用的應用程序。

You may use the calendar app on your iPhone, Mac, or iPad, that’s obvious. These three devices offer all needed features from reminding us about the event through the ability to create or edit it.

很明顯，您可以在iPhone，Mac或iPad上使用日歷應用程序。 從提醒我們有關事件的能力到創(chuàng)建或編輯事件的能力，這三種設備均提供了所有必需的功能。

With Apple Watch, you also got the Calendar app inside. Your watch face with complication (little widget) may display the upcoming event, or you may browse a few upcoming ones in the app. If you set a reminder to your event, you will also receive the notification on your Smartwatch.

借助Apple Watch，您還可以在其中使用“日歷”應用程序。 復雜的表盤(小部件)可能顯示即將發(fā)生的事件，或者您可以在應用程序中瀏覽一些即將發(fā)生的事件。 如果您為活動設置提醒，您還將在Smartwatch上收到通知。

What’s more, CarPlay also includes a Calendar App. This means that your car will remind you about the event, or you are able to browse the list or upcoming ones.

此外，CarPlay還包含一個日歷應用程序。 這意味著您的汽車會提醒您有關事件的信息，或者您可以瀏覽列表或即將到來的事件。

Finally, HomePod with Siri is able to notify you and add or modify events through short voice commands.

最后，帶有Siri的HomePod能夠通過簡短的語音命令通知您并添加或修改事件。

Apple Calendar on multiple devices. Task-Oriented Design in action.在多個設備上的Apple Calendar。 面向任務的設計付諸實踐。

如何在任務驅(qū)動設計中保持一致性。 (How to maintain consistency in Task Driven Design.)

Making a solution that feels familiar on so many different devices is very challenging. To maintain consistency, previously mentioned Apple had developed a Design System that gives the user experience of seamless experience connected with Brand.

在許多不同的設備上打造讓人感到熟悉的解決方案非常具有挑戰(zhàn)性。 為了保持一致性，前面提到的Apple開發(fā)了一個設計系統(tǒng) ，該系統(tǒng)可為用戶提供與Brand相關的無縫體驗。

For all Graphical User Interfaces, designers used the same font family and color tones. Iconography is also identical. For Voice Assistant, Apple used well know Siri voice with commands that are identical across macOS, iOS, Apple Watch, or HomePod.

對于所有圖形用戶界面，設計人員使用相同的字體系列和色調(diào)。 圖像學也相同。 對于Voice Assistant，Apple使用眾所周知的Siri語音，其命令在macOS，iOS，Apple Watch或HomePod上均相同。

Creating a scalable and modular design system is a must for Task-Oriented Design System. To achieve this, you have to know how to manage the multiple libraries.

對于面向任務的設計系統(tǒng)，必須創(chuàng)建可擴展的模塊化設計系統(tǒng)。 為此，您必須知道如何管理多個庫 。

在哪里了解更多？ (Where to learn more?)

Here are some inspiration stories and guidelines from companies that already think about every device category as a part of wider system:

以下是一些公司的靈感故事和指南，這些公司已經(jīng)考慮將每個設備類別作為更廣泛的系統(tǒng)的一部分：

• Google Material Design Guidelines & Resources

  Google物料設計指南和資源

• Apple Human Interface Guidelines

  蘋果人機界面指南

• Smashing Magazine — Journey Driven Design

  粉碎雜志-旅程驅(qū)動設計

• Adobe Blog — Designing for Different Screens & Devices

  Adobe Blog —為不同的屏幕和設備設計

• Interaction Design Fountation — Adaptive vs. Responsive Design

  交互設計基礎-自適應與響應設計

加起來 (Summing up)

Now you already know that Task-Oriented Design is a natural trend that already exists and becomes more popular in recent years. I described this type of thinking in my blog article — this story is its extension. I hope it will help you to design more consciously.

現(xiàn)在您已經(jīng)知道，面向任務的設計是一種自然趨勢，已經(jīng)存在并且近年來越來越流行。 我在博客文章中描述了這種思維方式-這個故事是它的延伸。 希望它能幫助您更自覺地進行設計。

When you create a solution for multiple devices, it is crucial to know the specific device’s abilities and limitations. This will let you design the best user experience.

為多個設備創(chuàng)建解決方案時，了解特定設備的功能和局限性至關重要。 這將使您設計出最佳的用戶體驗。

What do you think of Task-Oriented Design? Do you use this type of thinking in your projects? Let me know in the comments!

您如何看待面向任務的設計？ 您在項目中使用這種思維方式嗎？ 在評論中讓我知道！

Thank you for reading!

感謝您的閱讀！

翻譯自: https://blog.prototypr.io/task-oriented-design-more-than-mobile-first-and-rwd-712bd5e4ca52

java rwd

總結(jié)

以上是生活随笔為你收集整理的java rwd_面向任务的设计-不仅限于Mobile First和RWD的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。