অ্যাডোব অভিজ্ঞতা নকশা কৌশল, টিপস, এবং কৌশল

07 এর 01

অ্যাডোব অভিজ্ঞতা নকশা কৌশল, টিপস, এবং কৌশল

যখন অ্যাডোব জনসাধারণের পূর্বরূপ হিসাবে অভিজ্ঞতা ডিজাইন চালু করে, তখন একই সময়ে কোম্পানিটি দুটি বরং অসাধারণ কৃতিত্ব অর্জন করে। প্রথম, তারা উঠতি প্রোটোটাইপিং সফটওয়্যার বাজারে একটি স্থান খুঁজে বের করে। দ্বিতীয়ত, তারা ব্যবহারকারীদের একটি "কার্য-অগ্রগতি" নিয়ে খেলা করার সুযোগ তৈরি করে এবং ব্যবহারকারীদের সেই অগ্রগতিকে প্রভাবিত করার অনুমতি দেয়। এখন অ্যাপ্লিকেশানটি কয়েক মাসের জন্য উপলব্ধ হয়েছে, আমি মনে করি এটি কিছু অভিজ্ঞতা ডিজাইন কৌশল, টিপস এবং কৌশলগুলি ভাগ করার জন্য একটি ভাল সময় হবে।

কিন্তু প্রথম, আপনি প্রোটোটাইপিং সফ্টওয়্যার দ্বারা বোঝানো হয় কি ভাবছি হতে পারে। এই স্থানগুলির প্রধান খেলোয়াড়গুলির মধ্যে Proto.io, Principle, UXPin, Atomic.io, অভিজ্ঞতা নকশা এবং ইনভিশন। স্কেচ 3, ফটোশপ এবং ইলাস্ট্রেটারের মতো অ্যাপ্লিকেশনগুলির মত যেখানে স্ট্যাটিক ডিজাইন তৈরি করা হয়, এই গ্রাফিকাল সম্পাদকগুলি আজকের মোবাইল এবং ওয়েব ডিজাইন স্পেসে ইন্টারঅ্যাক্টিভিটি, গতি এবং অন্যান্য বৈশিষ্ট্যগুলি পরিচয় দেয়।

মোবাইলের উত্থান এবং অনিবার্য, ব্যবহারকারীর উপর লেজারের মতো ফোকাসের সাথে, ডিজাইনারের জন্য কয়েকটি স্কেচ চিট করা, কয়েকটি কম্পন একত্রিত করা এবং তারপর প্রকল্পটি ছেড়ে দেওয়া বা এটি কোনও ওয়েব সার্ভারে আপলোড করা যথেষ্ট নয়। UI / UX ওয়ার্কফ্লো মৌলিকভাবে জিনিস পরিবর্তন করেছে। প্রক্রিয়াটির প্রতিটি পদক্ষেপ, ব্যবহারকারী, স্কেচ, তারের ফ্রেম, mockups, এবং প্রোটোটাইপিং সনাক্তকরণ থেকে এখন ব্যাপক ব্যবহারকারী পরীক্ষার সাপেক্ষে।

এটি শেষ পর্যায় - প্রোটোটাইপিং - প্রকল্পটি চূড়ান্ত উৎপাদনে যাওয়ার আগে ব্যথা পয়েন্টগুলি আবিষ্কৃত এবং সংশোধন করা হয়। এই যেখানে ইন্টারেক্টিভিটি, গতি, পর্দা স্থানান্তর এবং পর্দায় সবকিছু বসানো তাই সমালোচনামূলক। সমস্যা এবং সমস্যা কেবল স্ট্যাটিক ইমেজ হিসাবে বা মৌখিকভাবে ব্যাখ্যা করা যাবে না। সব পরে, এই পণ্য বাস্তব মানুষের জন্য। কোডটি যে সমস্ত সরানোর পরিবর্তে, প্রোটোটাইপিং প্রক্রিয়াটি ক্রমশই সেই উদ্দেশ্যে পরিকল্পিত গ্রাফিক্স সফ্টওয়্যার দ্বারা পরিচালিত হচ্ছে। ক্রমাগত পুনঃলিখন এবং ডিবাগিং কোডের চেয়ে একটি ত্রুটি সংশোধন করা, একটি চিত্র প্রতিস্থাপন করা, কিছু পাঠ্য পুনর্লিখন করা, একটি বোতাম সরানো এবং আরও একটি চাক্ষুষ সম্পাদক ব্যবহার করা আরও সহজ।

আসলে, এই সফ্টওয়্যার আজকের "র্যাপিড প্রোটোটাইপিং" ডিজাইন ও ডেভেলপমেন্ট পরিবেশে একটি মূল উপাদান হয়ে উঠেছে।

যে বলেন, অভিজ্ঞতা নকশা সঙ্গে কিছু মজা আছে।

02 এর 02

অ্যাডোব অভিজ্ঞতা ডিজাইনের একটি সরল সার্কেলের সাথে একটি গন্তব্য পিন তৈরি করুন

এক্সডি একটি সুষম দৃষ্টিভঙ্গি এটি ভেক্টর অঙ্কন সরঞ্জাম ব্যবহার করা হয়। একটি আইকন খুঁজে পাচ্ছেন না? সমস্যা নেই. আপনার নিজের রোল। এখানে কিভাবে:

1. নির্বাচন করা ইলিপস টুল এবং, বিকল্প / Alt-Shift কী চাপলে, একটি বৃত্ত আঁকুন।
2. নির্বাচিত বৃত্ত সঙ্গে, সেট করুন FF0000 রঙ পূরণ করুন এবং সীমানা সম্পত্তি মধ্যে "কেউ"।
3. নোঙ্গর পয়েন্ট প্রদর্শন বৃত্তে ডাবল ক্লিক করুন। নিচের নীচের অ্যাঙ্কর টানুন।
4. নির্বাচিত অ্যাঙ্কর পয়েন্টটি ডাবল-ক্লিক করুন এবং রেখাগুলির সাথে রেখাগুলি প্রতিস্থাপিত হয়।
5. একটি সাদা ভরাট এবং কোন স্টোক সঙ্গে অন্য ছোট বৃত্ত আঁকা। অবস্থানে এটি সরান এবং পিন এবং বৃত্ত নির্বাচন করুন। প্রোপার্টি শীর্ষে অ্যালাইন প্যানেলে অনুভূমিক কেন্দ্র বোতামটি ক্লিক করুন এবং পিন তৈরি করা হয়।

03 এর 03

অ্যাডোব অভিজ্ঞতা ডিজাইন একটি ব্যাকগ্রাউন্ড ব্লার তৈরি করুন

একটি ব্যাকগ্রাউন্ড ইমেজ উপর টেক্সট বা অন্যান্য কন্টেন্ট আছে একটি সাধারণ। এখানে সমস্যাটি চিত্রটি বেশি নয়, এটির উপরে থাকা সামগ্রীটিকে বেশি ক্ষমতা দেয়। এই সমস্যা সমাধানের এক উপায় হল ব্যাকগ্রাউন্ড চিত্রটি ব্লাড করা। আপনি ফটোশপ বা অন্য ছবির সম্পাদনা সফটওয়্যারে ছবিটিকে আলিঙ্গন করতে পারেন তবে এটি কিছুটা অকার্যকর, বিশেষ করে XD এখন আপনার জন্য এই কাজটি পরিচালনা করতে পারে। এখানে কিভাবে:

1. একটি নতুন আর্টবোর্ড তৈরি করুন এবং আপনার ব্যাকগ্রাউন্ড ইমেজ যোগ করুন।
2. আয়তক্ষেত্র টুল নির্বাচন করুন and ইমেজ উপর একটি আয়তক্ষেত্র আঁকা। আয়তক্ষেত্র নির্বাচন করে, হোয়াইট এবং স্ট্রোক পূরণ করুন কোনটি সেট করুন।
3. আয়তক্ষেত্র নির্বাচন সঙ্গে, পটভূমি ব্লুর নির্বাচন করুন বৈশিষ্ট্য প্যানেল। তিনটি স্লাইডার ব্লুর পরিমাণ, উজ্জ্বলতা এবং অস্পষ্টতা। এখানে তারা কি করে:

• ব্লুর পরিমাণ: আকৃতির নীচের ছবির অস্পষ্টতা সামঞ্জস্য করে। সর্বাধিক মান +50।
• উজ্জ্বলতা: ছবিতে হাইলাইট এবং ছায়া সামঞ্জস্য করে। ন্যূনতম মান -50 এবং সর্বাধিক মান +50 হয়।
• অপাসিটি: আকৃতির স্বচ্ছতা এবং আকৃতির অধীনে চিত্রটির দৃশ্যমানতা প্রভাবিত করে। মান 0% থেকে 100% পর্যন্ত পরিসীমা।

আপনি যদি সত্যিই "জিনিসগুলিকে স্যুইচ করুন" চান, আকৃতির রঙটি পরিবর্তন করুন এবং চিত্রটির "চেহারা" পরিবর্তন করতে অস্পষ্টতা মান দিয়ে খেলুন।

04 এর 04

অ্যাডোব অভিজ্ঞতা ডিজাইন একটি scrim তৈরি করুন

একটি সাধারণ নকশা সমস্যা হল ইন্টারফেস উপাদানের উপাদানের একটি সাধারণ রঙ হতে হবে তবে, একটি পটভূমি চিত্র বা কঠিন রঙের উপর স্থাপন করা হলে হারিয়ে যায়। সমাধান একটি scrim হয়। একটি scrim ইন্টারফেস উপাদান এবং পটভূমি মধ্যে কিছুটা অপ্রকাশিত গ্রেডিয়েন্ট স্থাপন করা হয়। এই এক্সডি অর্জন করা সহজ। এখানে কিভাবে:

1. XD এ আপনার আর্টবোর্ড তৈরি করুন, একটি চিত্র যুক্ত করুন এবং উপযুক্ত থেকে একটি ইন্টারফেস উপাদান কপি এবং আটকান ইউআই কিট - ফাইল> ওপেন UI কিট … - আর্টবোর্ডে। উপরের ছবিতে ছবিটি স্ট্যাটাস বার এবং অ্যাপ বারটি দেখতে কঠিন করে তোলে।
2. আয়তক্ষেত্র টুল নির্বাচন করুন এবং একটি আয়তক্ষেত্র আঁকা। প্রোপার্টিতে প্যানেল নির্বাচন করুন এবং রঙ চয়নকারীতে পপ ডাউন থেকে গ্রেডিয়েন্ট নির্বাচন করুন। গ্রেডিয়েন্ট রং কালো এবং সাদা সেট করুন। একটি মান সেট করুন - অস্পষ্টতা - 60% এবং সাদা একটি মান 0%।
3. আয়তক্ষেত্র নির্বাচন সঙ্গে, অবজেক্ট> ব্যবস্থা> পশ্চাদপসরণ পাঠান নির্বাচন করুন। ইন্টারফেস উপাদান এখন ইমেজ উপর দৃশ্যমান হয়।

05 এর 05

অ্যাডোব অভিজ্ঞতা নকশাতে একটি চিত্র অবতার তৈরি করুন

চ্যাট অ্যাপগুলিতে একটি সাধারণ ডিজাইন প্যাটার্ন পাওয়া যায় যেখানে লোকেরা একে অপরের সাথে কথা বলে এবং স্পিকারের ছবিটি পর্দায় প্রদর্শিত হয়। এই avatar সাধারণত মাস্ক করা হয়েছে যে ছবি। এটা মৃত সহজ XD ​​মধ্যে এই অর্জন। এখানে কিভাবে:

1. আপনি একটি ইমেজ এবং আর্টবোর্ডে একটি বৃত্ত বা অন্য আকৃতি দিয়ে শুরু। আপনি যেকোন রঙ দিয়ে বৃত্তটি পূরণ করতে পারেন। আপনি কি করতে হবে না একটি স্ট্রোক রঙ যোগ করা হয়। আপনি প্রভাব তৈরি যখন এটি অদৃশ্য হয়ে যাবে, তাই বিরক্ত কেন। যদি আপনি বৃত্তটি বন্ধ করতে চান তবে ক্লিপবোর্ডে এটি অনুলিপি করুন।
2. বৃত্তে ছবিটি সরান এবং চিত্র এবং বৃত্ত উভয় নির্বাচন করুন। বট বস্তু নির্বাচিত সঙ্গে, আকৃতি> আকৃতি সঙ্গে মাস্ক নির্বাচন করুন। যখন আপনি মাউস ছেড়ে দেন, অবতার তৈরি হয়। সেখানে থেকে আপনি এটি আকার পরিবর্তন করতে পারেন।
3. আপনি যদি স্ট্রোক যুক্ত করতে চান তবে আর্টबोर्डে আপনার ক্লিপবোর্ডে থাকা বৃত্তটি আটকে দিন। অনুলিপি নির্বাচিত বৈশিষ্ট্যাবলী পূরণ বন্ধ করুন এবং একটি স্ট্রোক রঙ এবং প্রস্থ যোগ করুন। তাদের লাইন আপ করতে, উভয় বস্তু নির্বাচন করুন এবং বৈশিষ্ট্য প্যানেলের শীর্ষে অ্যালাইন বিকল্পগুলিতে কেন্দ্র সারিবদ্ধ বোতামগুলিতে ক্লিক করুন।
4. আপনি যদি মাস্কের চারপাশে ছবিটি সরাতে চান, ডবল মাস্ক ক্লিক করুন। এই ছবি এবং মাস্ক আকৃতি দেখাবে। ছবিতে ক্লিক করুন এবং অবস্থানের মধ্যে টেনে আনুন। যখন আপনি মাউসটি ছেড়ে দেন, তখন ছবিটি মাস্কের ভিতরে তার নতুন অবস্থানের মধ্যে থাকবে।

07 এর 06

অ্যাডোব অভিজ্ঞতা ডিজাইন Artboards সঙ্গে খেলুন

আপনি বিষয়বস্তু স্থাপন করার জন্য অভিজ্ঞতা ডিজাইন artboards শুধু সেখানে নেই। তারা খুব, ম্যানিপুলেশন করা যেতে পারে। এখানে আপনি কয়েকটি জিনিস করতে পারেন:

1. যদি আপনার কোন আর্টবোর্ডের ল্যান্ডস্কেপ এবং পোর্ট্রেট সংস্করণগুলি প্রয়োজন হয় তবে আর্টবোর্ডটি অনুলিপি করুন এবং ডুপ্লিকেট নির্বাচিত করে প্রোপার্টি প্যানেলে ল্যান্ডস্কেপ বোতামটিতে ক্লিক করুন। আর্টবোর্ড ল্যান্ডস্কেপ অভিযোজন পরিবর্তন হবে। যদি আর্টবোর্ডটিতে সামগ্রী থাকে তবে আর্টবোর্ডের নামটি ক্লিক করুন এবং এপার্টবোর্ডের বৈশিষ্ট্যগুলি প্রোপার্টিজ প্যানেলে উপস্থিত হবে।
2. আর্টবোর্ডে একটি কাস্টম রঙ যোগ করার জন্য, এবং সেই বিষয়ে প্রকল্পের জন্য, আর্টবোর্ড নির্বাচন করুন এবং প্রোপার্টি প্যানেলের চেহারা অংশে ফিল রঙের চিপটি ক্লিক করুন। রঙের জন্য হেক্সাডেসিমেল মান লিখুন এবং + চিহ্ন ক্লিক করুন। রঙ একটি কাস্টম রঙ হিসাবে যোগ করা হবে। অন্যত্র যে রঙ প্রয়োগ করতে, একটি বস্তু নির্বাচন করুন এবং রঙ প্রয়োগ করতে কাস্টম রঙ চিপ ক্লিক করুন।
3. Artboards উল্লম্বভাবে স্ক্রল করা যেতে পারে। এটি করার জন্য, আর্টবোর্ডটি নির্বাচন করুন এবং তার উচ্চতাটি প্রোপার্টি প্যানেলগুলিতে বা আর্টবোর্ডের নিচের দিকে টেনে আনুন। বৈশিষ্ট্য প্যানেলের স্ক্রোলযোগ্য এলাকায়, পপ ডাউন মেনু থেকে উল্লম্ব নির্বাচন করুন এবং পর্দার জন্য ভিউপোর্টের উচ্চতা প্রবেশ করুন। যে dashed নীল লাইন আপনি ভিউপোর্ট নীচে দেখায়। এটি পরীক্ষা করার জন্য Play বাটনে ক্লিক করুন এবং স্ক্রোল করুন। স্ক্রোলিং বন্ধ করতে, স্ক্রোলিং পপ ডাউনটিতে কেউ নির্বাচন করুন।

07 07 07

Adobe Experience Design এ একটি মোবাইল UI কীট সম্পাদনা করুন

এক্সপেরিয়েন্স ডিজাইন আইওএস, অ্যান্ড্রয়েড এবং উইন্ডোজ UI এর ডেভেলপ করার জন্য একটি UI কীট রয়েছে। আপনি যখন তাদের প্রথম খোলা, আপনি মনে করতে পারেন তারা বেশ ভালভাবে সেট করা হয়। মোটামুটি না-সেই খেলনাগুলির বিট এবং টুকরা সম্পূর্ণরূপে সম্পাদনাযোগ্য। চলুন একটি অ্যান্ড্রয়েড ওয়্যারফ্রেম তৈরি করে খুঁজে বের করি।

1. আপনি আর্টবোর্ড টুল নির্বাচন করে এবং নির্বাচন করে শুরু প্রোপার্টি প্যানেলের গুগল বিভাগে অ্যান্ড্রয়েড মোবাইল.
2. ফাইল> খুলুন UI কীট> Google উপাদান নির্বাচন করুন। এটি মাল্টিমিডিয়া ডিজাইন ইউআই কিট খোলে। ম্যাগনিফাইং গ্লাস এবং মার্কে টি টি নির্বাচন করুনতিনি স্ক্রিন গাইড আর্টবোর্ড। আমি এই এক দিয়ে শুরু করতে চাই কারণ এটি আমাকে ইন্টারফেস উপাদানের যথাযথ অন-স্ক্রীন বসানোর জন্য গাইড দেয়। আপনি ব্লু বারগুলির একটিতে ক্লিক করলে এটি লক হয়ে যাবে। এটি আনলক প্রতিটি তাদের সংযুক্ত লক ক্লিক করুন। আর্টবোর্ড মার্কে এবং ক্লিপবোর্ডে নির্বাচন অনুলিপি করুন। আপনার নথিতে ফিরে যান এবং আপনার আর্টবোর্ডে স্ক্রিনটি পেস্ট করুন।
3. আর্টবোর্ডের উপরে অ্যাপ বারে একবার ক্লিক করুন। লক্ষ্য করুন কিভাবে আপনি এটি নির্বাচন করতে পারেন।বস্তু নির্বাচন করুন> ব্যবস্থা> সামনে আনুন। আপনার নির্বাচন এখন স্ক্রিন গাইড উপরে। এটি আপনাকে পর্দায় প্রতিটি উপাদান সম্পাদিত করতে সক্ষম বলে জানা উচিত।
4. ডাবল ক্লিক করুন স্ট্যাটাস বার উপরে এবং, প্রোপার্টি প্যানেল এর মধ্যেএবং ফিল রঙ 455A64। অ্যাপ বারটি ডাবল ক্লিক করুন এবং 607D8B এ এটি পূরণ করুন। এটি আপনাকে একটি UI কীতে প্রতিটি উপাদানটি প্রকল্পটির রঙের উল্লেখগুলি পূরণ করতে সম্পাদনা করতে পারে।
5. আইকন সম্পর্কে কি? এখানে তাদের রঙ পরিবর্তন কিভাবে। ডাবল ক্লিক করুন এটা নির্বাচন করুন। আপনি যদি প্রোপার্টিজ প্যানেলটি দেখেন তবে আপনি অনুমান করতে পারেন যে আপনি নির্বাচনটি সম্পাদনা করতে পারবেন না। বেশ না। ডাবল ডাবল ক্লিক করুন আরো একবার। বৈশিষ্ট্য খোলা এবং আপনি FF0000 পূরণ করুন রঙ পরিবর্তন। অবশিষ্ট আইকন এবং পাঠ্যের জন্য এই ডবল-ডাবল-ক্লিক কৌশলটি পুনরাবৃত্তি করুন।