অ্যাডোব অভিজ্ঞতা ডিজাইন ট্রিকস, টিপস, এবং প্রযুক্তি

01 এর 07

অ্যাডোব অভিজ্ঞতা ডিজাইন ট্রিকস, টিপস, এবং প্রযুক্তি

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

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

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

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

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

সঙ্গে বলেন যে, এর অভিজ্ঞতা ডিজাইন সঙ্গে কিছু মজা আছে যাক

02 এর 07

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

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

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

07 এর 03

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

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

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

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

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

04 এর 07

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

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

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

05 থেকে 07

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

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

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

06 থেকে 07

অ্যাডোব অভিজ্ঞতা ডিজাইন আর্টবোর্ডের সাথে খেলুন

অভিজ্ঞতা ডিজাইন আর্টবোর্ডগুলি কেবল আপনার জন্য সামগ্রী রাখে না। তারাও চটকদার হতে পারে। এখানে কয়েকটি জিনিস আপনি করতে পারেন:

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

07 07 07

অ্যাডোব অভিজ্ঞতা ডিজাইন একটি মোবাইল UI কিট সম্পাদনা করুন

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

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